The DEMO

Question

我有一个用es6编写的指令。我需要一些服务注入这个指令控制器。在es5中，我会做类似的事情：

function MyDirective() {

   function controller(commonService) {
       commonService.doSomething(this.type);
   };
   return {
        scope: {
           type: '='
        },
        restrict: 'E',
        controller: ['commonService', controller],
        controllerAs: 'vm',
        templateUrl: 'myTemplate.html',
        bindToController: true
   };
}

angular.module('myApp').directive('myDirective', ['commonService', MyDirective]);

那样，在ES5中，一切都过得很好。在es6中，我这样做：

class MyDirective {

       constructor(commonService) {

           this.scope = {
              type: '='
           };
           this.restrict = 'E';
           this.controllerAs = 'vm';
           this.templateUrl = 'myTemplate.html';
           this.bindToController: true;
       }

       controller() {
           commonService.doSomething(this.type);
       }
}

angular.module('myApp').directive('myDirective', [('commonService') => MyDirective(commonService)]);

现在的问题是：我不能再将commonService注入我的控制器了。我试过用

this.commonService = commonService;

在构造函数中，但不幸的是，由于某些奇怪的原因，我无法在控制器内部访问“this”。（这不是第一次上课的重点吗？）

如何将commonService注入控制器功能，或者如何从控制器功能访问“this”？

谢谢！

Answer 1

一种选择是将控制器定义为一个类。

The DEMO

class MyDirective {

   constructor() {
       this.scope = {
          type: '@'
       };
       this.restrict = 'E';
       this.controller = 'myDirectiveCtrl',
       this.controllerAs = 'vm';
       this.template = `
           <fieldset>
              myDir type={{vm.type}}
              <br> Service {{vm.serviceType}}
           </fieldset>`;
       this.bindToController = true;
   }
}

class MyDirectiveCtrl {
    constructor(commonService) {
       this.commonService = commonService;
    }
    $onInit() {
       this.serviceType = this.commonService.doSomething(this.type);
    }
}
MyDirectiveCtrl.$inject = ['commonService'];

angular.module('myApp',[])
  .directive('myDirective', MyDirective)
  .controller("myDirectiveCtrl", MyDirectiveCtrl)
  .value("commonService", {
    doSomething: (type) => ("--"+type+"--")
  })

<script src="//unpkg.com/angular/angular.js"></script>
  <body ng-app="myApp">
    <h1>ES6 Directive Demo</h1>
    <my-directive type="IDK"></my-directive>
  </body>

如何注入ES6中的指令控制器

1 个答案:

The DEMO