调用链接功能指令Angular 1 ES6

Question

I create a directive based on ES6 style:

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

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

then in index.js :

import angular from 'angular';

import myDirective from './myDirective';

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

But when I call myDirective on html like: <my-directive><my-directive> it does not call link function or compile function. What can I do?

Answer 1

We use ES6 here, and our directives dont really look like that, I'll give an example:

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
});

You get the idea anyway. Try structuring it like that and see if the link function works as you would expect.

Answer 2

I have the same problem using AngularJS + ES6 + Webpack. Maybe you could add this in your Directive, in your compile function:

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

Check this links for more acurated info:

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/