javascript - Angular 1.4 ES6 类指令

Question

我正在研究是否可以在 1.4 中接受指令并尝试类似于 1.5 组件。我使用 bindToController 和 controllerAs 在我的指令中使用 Controller 而不是单独的 Controller 。我已经通过导出为函数成功完成了此操作，但想看看是否可以导出为类，并看看是否有这样做的充分理由。我现在遇到了 bindToController 错误，代码如下:

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

为了简洁起见，我省略了一些与尝试将此指令转换为组件无关的模块。请注意，我试图在 .directive() 之前不使用 .controller()。

当我尝试使用它时，出现此错误:

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

我不确定我是否走在正确的道路上，或者这不是正确的道路。

感谢您的帮助。

Answer 1

您应该将 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);

将 Controller 实现为类方法是没有意义的。

这意味着您将有两个类...除非您只想使指令定义对象工厂成为 Controller 的普通旧函数或静态方法。