呼叫鏈接功能指令角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; 

但是，當我打電話myDirective對HTML這樣的：<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); 
} 

檢查這個鏈接，瞭解更多acurated信息：

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/