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