Question

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

代码段：

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

Answer 1

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

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

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

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

如果要使用带有角度的类，更好的方法是将它们用于控制器并使用controllerAs语法。 e.g。

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.
    }
}

Answer 2

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

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

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

在es6的指令中，这是null

2 个答案: