javascript - 将 $compile 注入(inject)指令未定义

Question

我正在尝试将 $compile 注入(inject)到我的指令中，这样我就可以在将指令附加到 div 之前对其进行编译。现在，$compile 是未定义的，我是不是注入(inject)错了？我正在使用 ES6/Angular 1.5.x

    import MyController from './mycontroller';

    class MyDirective {
       constructor($compile) {
        this.restrict = 'A';
        this.scope = {};

        this.controller = MyController;
        this.controllerAs = 'vm';
        this._$compile = $compile;
     }

     link(scope, element) {
        let div = angular.element(document.getElementById('targetDiv'));

        // $compile is undefined
        let compiled = this._$compile("<another-directive></another-directive>")(scope));
     }

      static directiveFactory($compile){
        MyDirective.instance = new MyDirective($compile);
        return MyDirective.instance;
      }
    }

    MyDirective.directiveFactory.$inject = ['$compile'];

    export default MyDirective.directiveFactory;

Answer 1

我在 ES6 风格上也遇到了类似的问题，经过大量的努力，我想出了下面的工作模式。希望这也能解决您的问题。我

this 使用 ES6 风格的指令的内部链接函数将为空。要注入(inject)依赖项并使用 ES6 样式在指令中工作，请遵循以下样式:

import MyController from './mycontroller';

class MyDirective {
   constructor() {
    this.restrict = 'A';
    this.scope = {};

    this.controller = MyController;
    this.controllerAs = 'vm';
 }

 link(scope, element, attr, ctrl) {
    let div = angular.element(document.getElementById('targetDiv'));

    let compiled = ctrl.$compile("<another-directive></another-directive>")(scope));
 }

  static directiveFactory(){
    MyDirective.instance = new MyDirective();
    return MyDirective.instance;
  }
}

export default MyDirective.directiveFactory;

然后在 mycontroller.js 中，注入(inject) $compile 服务并将其绑定(bind)到构造函数中的 Controller 实例。以下是示例片段:

export default class MyController {
   constructor($compile) {
       ...
       this.$compile = $compile;
       ...
   }

   ...
 }

 MyController.$inject = ['$compile'];