使用粗箭头将范围变量传递给 AngularJS 控制器

Passing scope variables to an AngularJS controller using fat arrows

我正在更新 AngularJS 应用程序以对匿名函数使用粗箭头语法。我知道我,但有些东西还是不行。例如,这里我有一个自定义指令,它将字符串 'hello' 传递给它的控制器,然后控制器将字符串作为警报输出:

<div data-my-directive="hello">Text that will be replaced by my-template</div>

angular
    .module('myModule')
    .directive('myDirective', () => (
            {
                restrict: 'A',
                templateUrl: 'my-template',
                controller: 'myController',
                controllerAs: 'myCtrl',
                bindToController: true,
                scope: {myVariable : '@myDirective'}
            }))
    .controller('myController', () => {
        alert('the scope variable is: ' + this.myVariable );
    }

但这会提醒 'the scope variable is: undefined'。

如果我将控制器定义更改为使用 ES5 语法,那么它会按预期提醒 'the scope variable is: hello'。

    .controller('myController', function() {
        alert('the scope variable is: ' + this.myVariable);
    }

我想这与 binding of this 有关。

有没有办法像上面那样在传递作用域变量时使用粗箭头表示法?

在这种情况下,您必须使用函数而不是 ()=>。

如果你这样做:

.controller('myController', () => {
    console.log(this); // -> window
})

这里如果使用箭头函数,这个===window。控制器需要一个真正的范围才能正常工作。我很确定您不希望 window 作为您应用中所有控制器的公共对象 :)

箭头函数对于 class 和回调非常有用,但不应每次都使用。

Angular 像这样调用控制器函数:fn.apply(self, args); 其中 self(在调用的函数中变为 this)是一个具有必需字段的对象 - 即示例中的 myVariable

Arrow functions ignore the first of apply's arguments。所以正如@Yoann 所说,我们必须使用 function() {...} 而不是 () => {...}.