Angular 1.4 ES6 Class Directive

Я работаю над тем, чтобы увидеть, могу ли я взять директиву в 1.4 и попытаться похож на компонент 1.5. Я использую bindToController и controllerAs, чтобы использовать контроллер в моей директиве вместо отдельного контроллера. Я сделал это успешно с экспортом как функцией, но хотел посмотреть, могу ли я экспортировать как класс, и посмотреть, есть ли веские причины для этого. Я бегу в ошибку bindToController прямо сейчас с помощью следующего кода:Angular 1.4 ES6 Class Directive

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; 
    } 
}

, а затем импортировать:

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

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

Существует некоторые из модуля, который я оставил за краткости, которые не должны делать с попыткой превратить эту директиву в компонент. Обратите внимание, что я стараюсь не использовать .controller() до .directive().

Когда я пытаюсь использовать это, я получаю эту ошибку:

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

Я не уверен, что я буду на правильном пути, или это не правильный путь, чтобы идти дальше.

Благодарим за помощь.

источник

2016-06-20 pertrai1

Вы должны реализовать RecordingCtrl как класс

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);

Это does't имеет смысл реализовать контроллер как метод класса.

Это означает, что у вас будет два класса ... если вы просто не хотите, чтобы объект определения директивы задал обычную старую функцию или статический метод вашего контроллера.

источник

2016-06-20 16:18:57 Martin

Я хочу убедиться, что я понимаю, что вы рекомендуете другой класс в коде, но тогда вы говорите, что это не имеет смысла. Как вы думаете, лучший подход? Я попытался добавить второй класс, но не знал, как реализовать его в 'recordMenuComponent this.controller'? – pertrai1

Просто сделайте this.controller = RecordingCtrl – Martin

Чтобы уточнить, имеет смысл использовать класс для контроллера, так как вы можете иметь несколько экземпляров контроллера. Для DDO это не имеет смысла использовать класс. DDO - объект по определению. Не существует нескольких экземпляров. – Martin

Я смог получить эту работу, даже если это не лучший подход. Это для экспериментов и способа, которым я смог заставить его работать:

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

источник

2016-06-20 17:19:47 pertrai1

Angular 1.4 ES6 Class Directive

ответ

Смежные вопросы