각도 1.4 ES6 클래스 지시문

1.4에서 지침을 받아 1.5 구성 요소를 닮을 수 있는지 알아보기 위해 노력하고 있습니다. 별도의 컨트롤러 대신 내 지시문에 컨트롤러를 사용하려면 bindToController 및 controllerAs을 사용하고 있습니다. 함수로 내보내기를 성공적으로 수행했지만 클래스로 내보낼 수 있는지 확인하고 그렇게해야 할 충분한 이유가 있는지 확인하려고했습니다.각도 1.4 ES6 클래스 지시문

export default class recordingMenuComponent { 
    constructor(RecordingCtrl) { 
     'ngInject'; 
     this.restrict = 'E', 
     this.scope = {}, 
     this.templateUrl = '/partials/media/recording/recording-menu.html', 
     this.controller = RecordingCtrl, 
     this.controllerAs = 'record', 
     this.bindToController = { 
      video: '=' 
     } 
    } 

    RecordingCtrl($log, $scope, $state, $timeout, RecordingService) { 
     'ngInject'; 
     const record = this; 
     Object.assign(record, { 
     recentCalls: record.recentCalls, 
     startRecording() { 
      let video = { 
       accountId: $scope.accountId, 
       title: record.sipUrl 
      }; 

      RecordingService 
       .recordVideoConference(video, record.sipUrl, record.sipPin, 0) 
       .then(result => { 
        video.id = result.id; 
        $timeout(() => $state.go('portal.video', {videoId: video.id}), 500); 
       }, error => $log.error('Error starting the recording conference: ', error)); 
     }, 
     getRecentCalls() { 
      RecordingService 
       .recentVideoConferenceCalls() 
       .then(result => { 
        record.recentCalls = result; 
       }, error => $log.error('There was an error in retrieving recent calls: ', error)); 
     } 
    }); 
} 

    static recordingFactory() { 
    recordingMenuComponent.instance = new recordingMenuComponent(); 
    return recordingMenuComponent.instance; 
    } 
}

를 한 후 수입 : 나는 다음과 같은 코드로 지금 bindToController 오류로 실행하고

import angular from 'angular' 
import recordingMenuComponent from './recordingMenuComponent' 

angular.module('recordingModule', []) 
    .directive(recordingMenuComponent.name, recordingMenuComponent.recordingFactory);

내가하지 않은 간결함을 위해 밖으로 남아있는 모듈의 일부를이 이 지시어를 구성 요소로 바꾸는 것과 함께하십시오. .directive() 전에 .controller()을 사용하지 않으려 고합니다.

내가 이것을 사용하려고 할 때이 오류 얻을 :

angular.js:9490 Error: [$compile:noctrl] Cannot bind to controller without directive 'recordingMenuComponent's controller

내가 바른 길에 갈거야 또는이 진행되는 바른 길없는 모르겠습니다을.

도움 주셔서 감사합니다.

출처

2016-06-20 pertrai1

당신은 클래스 메소드와 같은 컨트롤러를 구현하는 의미가 does't

const app = require('../app'); 

class RecordingCtrl { 

    static $inject = ['$log', 'RecordingService']; 
    constructor($log, recordingService) { 
     this.$log = $log; 
     this.recordingService = recordingService; 
    } 


    startRecording() { 
     // . . . 
    } 

    recentCalls() { 
     // . . . 
    } 
} 

// for ng15 component 
const recordingMenu = { 
    restrict: 'E', 
    scope = {}, 
    templateUrl = '/partials/media/recording/recording-menu.html', 
    controller = RecordingCtrl, 
    controllerAs = 'record', 
    bindToController = { 
     video: '=' 
    } 
} 

app.component('recordingMenu', recordingMenu); 

// or ng1.4 directive 
function recordingMenu() { 
    return { 
     restrict: 'E', 
     scope = {}, 
     templateUrl = '/partials/media/recording/recording-menu.html', 
     controller = RecordingCtrl, 
     controllerAs = 'record', 
     bindToController = { 
      video: '=' 
     } 
    } 
} 

app.directive('recordingMenu', recordingMenu);

클래스로 RecordingCtrl를 구현해야합니다.

즉, Directive Definition Object 팩토리를 컨트롤러의 평범한 함수 또는 정적 메서드로 만들려는 경우가 아니면이 두 클래스가 있습니다.

출처

2016-06-20 16:18:57 Martin

나는 코드에서 다른 클래스를 추천하지만 이해가되지 않는다는 것을 확실히하고 싶습니다. 가장 좋은 방법은 무엇이라고 생각하십니까? 두 번째 클래스를 추가하려고 시도했지만 'recordingMenuComponent this.controller'를 구현하는 방법을 몰랐습니까? – pertrai1

그냥 할 this.controller = RecordingCtrl – Martin

컨트롤러의 여러 인스턴스를 가질 수 있으므로 컨트롤러에 클래스를 사용하는 것이 좋습니다. DDO의 경우 클래스를 사용하는 것이 타당하지 않습니다. DDO는 정의에 의한 객체입니다. 인스턴스가 여러 개 없습니다. – Martin

최상의 접근 방식이 아니더라도이 기능을 사용할 수있었습니다. 그것은 실험을위한 것이고 내가 일할 수있는 방법입니다 :

.directive(recordingMenuComponent.name,() => new recordingMenuComponent())

출처

2016-06-20 17:19:47 pertrai1

각도 1.4 ES6 클래스 지시문

답변

관련 문제