这在es6的指令中为null

I'm writing directive with es6 (and compiling it with babel) after class constructor angular calls the link function of the directive but for some reason the this is null.

在类构造函数angular调用指令的链接函数之后，我正在用es6编写指令（并用babel编译它），但由于某种原因，这是null。

Code snippet:

代码段：

class AutoSaveDirective {
    constructor($timeout) {
        this.restrict = 'EA';
        this.require = '^form';

        this.$timeout = $timeout;
        this.scope = {
            autoOnSave: '&',
            autoSaveDebounce: '='
        }
    }

    link(scope, el, attr, formCtrl) {
        scope.$watch(()=> {
            console.log('form changed, starting timout');
            if (!formCtrl.$dirty) {
                return;
            }

at this line ==>if(this.currentTimeout){
                console.log('old timeout exist cleaning');
                this.currentTimeout.cancel();
                this.currentTimeout = null;
            }

            console.log('starting new timeout');
            this.currentTimeout = $timeout(()=>{
                console.log('timeout reached, initiating onsave')
                scope.autoOnSave();
            }, scope.autoSaveDebounce);
        });
    }
}

angular.module('sspApp').directive('autoSave', () => new AutoSaveDirective());

2 个解决方案

#1

You'd have to bind your link function to the class due the the way that angular calls it.

由于角度调用它的方式，您必须将链接函数绑定到类。

class AutoSaveDirective {
    constructor($timeout) {
        //...

        this.link = this.unboundLink.bind(this);
    }

    unboundLink(scope, el, attr, formCtrl) {
        scope.$watch(()=> {
            //...
        });
    }
}

If you want to use classes with angular a better approach would be to use them for controllers and use the controllerAs syntax. e.g.

如果你想使用带有角度的类，更好的方法是将它们用于控制器并使用controllerAs语法。例如

angular.module('sspApp').directive('autoSave', function() {
    return {
        restrict: 'EA',
        scope: {
            autoOnSave: '&',
            autoSaveDebounce: '=',
            formCtrl: '='
        },
        bindToController: true,
        controller: AutoSave,
        controllerAs: 'ctrl'
    };
});

class AutoSave {
    constructor() {
        //Move logic from link function in here.
    }
}

#2

The link function is returned by the compile function and it's called as a function, not as a method. So you can define a compile instead of a link method:

链接函数由compile函数返回，它被称为函数，而不是方法。因此，您可以定义编译而不是链接方法：

compile() {
  return (scope, el, attr, formCtrl)  => { ... };
}

Having said that, there's no value in defining a directive as a class.

话虽如此，将指令定义为类没有任何价值。

#1