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/

调用链接函数指令Angular 1 ES6

2 个答案: