Question

我正在更新AngularJS应用程序，以便为匿名函数使用胖箭头语法。我知道我need to use version 1.5，但有些事情仍然无效。例如，这里我有一个自定义指令，它将字符串'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 );
    }

但是这个警告'范围变量是：undefined'。

如果我将控制器定义更改为使用ES5语法，那么它会按预期警告“范围变量：hello”。

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

我想这与binding of this有关。

有没有办法在传递范围变量时使用胖箭头符号？

Answer 1

在这种情况下，您必须使用函数而不是（）=＆gt;。

如果你这样做：

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

如果你在这里使用箭头功能，这个===窗口。控制器需要真正的范围才能正常工作。我很确定你不希望窗口成为你应用中所有控制器的通用对象：）

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

Answer 2

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

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

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

2 个答案: