調用鏈接功能指令Angular 1 ES6

Question

我創建基於ES6樣式的指令：

export default class myDirective {
   constructor() {
       this.restrict = 'E';
       this.scope = {};

       this.link = link;
   }
   link() {
       console.log('link myDirective');
   }
}

然后在index.js ：

import angular from 'angular';

import myDirective from './myDirective';

export default angular
                .module('app.directives', [])
                .directive('myDirective ', () => new myDirective())
                .name;

但是，當我在html上調用myDirective時，例如： <my-directive><my-directive>它不會調用鏈接函數或編譯函數。 我能做什么？

Answer 1

我們在這里使用ES6，而我們的指令實際上並非如此，我將舉一個例子：

import templateUrl from './some.html';
import SomeController from './someController';
export default () => ({
  templateUrl,
  controller: SomeController,
  controllerAs: 'vm',
  scope: {
    someVariable: '='
  },
  link: (scope, element, attrs, controller) => {
    scope.link = {
      someFunction: function some() { }
    }
  },
  bindToController: true
});

無論如何，您都會明白。 嘗試像這樣構造它，然后查看鏈接功能是否按預期工作。

Answer 2

我在使用AngularJS + ES6 + Webpack時遇到相同的問題。 也許您可以在指令的編譯函數中添加以下內容：

compile() {
    //console.log("compile");  
    return this.link.bind(this);
}

檢查此鏈接以獲取更多信息：

https://github.com/geniuscarrier/webpack-angular-es6/blob/master/app/modules/home/directive/footer.js

https://www.michaelbromley.co.uk/blog/exploring-es6-classes-in-angularjs-1.x/