Angular 1.4 ES6 类指令答案

【问题标题】：Angular 1.4 ES6 Class DirectiveAngular 1.4 ES6 类指令
【发布时间】：2016-06-20 15:59:44
【问题描述】：

我正在研究是否可以在 1.4 中采用指令并尝试类似于 1.5 组件。我正在使用bindToController 和controllerAs 在我的指令中使用控制器而不是单独的控制器。我已经成功地导出为函数，但想看看我是否可以导出为一个类，看看是否有充分的理由这样做。我现在遇到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

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

感谢您的帮助。

【问题讨论】：

标签： javascript angularjs angularjs-directive ecmascript-6

【解决方案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);

将控制器实现为类方法是没有意义的。

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

【讨论】：

我想确保我理解你在代码中推荐了另一个类，但你说它没有意义。你认为最好的方法是什么？我尝试添加第二个类，但不知道如何实现到recordingMenuComponent this.controller？
就这样吧。controller = RecordingCtrl
澄清一下，为控制器使用一个类是有意义的，因为您可以有多个控制器实例。对于 DDO，使用类没有多大意义。根据定义，DDO 是一个对象。没有多个实例。
我已经用 Angular 1.5 组件的代码更新了我的示例。
如果我有这个错误，请原谅我，但是static $inject 属性声明不是有效的 ES6（尽管如果它是真的很好）。 $inject 属性应设置为 RecordingCtrl.$inject = [...] 并放置在类之后。还是我在这里遗漏了什么？

【解决方案2】：

即使这不是最好的方法，我也能做到这一点。这是为了实验和我能够让它工作的方式：

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

【讨论】：