使用箭头函数将作用域变量传递给AngularJS控制器

Question

我正在更新一个AngularJS应用程序，以使用肥箭头语法来表示匿名函数。我知道我需要使用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);
    }

我猜这与绑定this有关。

在传递作用域变量时，是否有使用“fat arrow”符号的方法？

- whistling_marmot

---

请告诉我，它是否正常工作？ - undefined

@JMK 第二个代码块（没有胖箭头）是 ES5 语法。 - undefined

不是胖，只是箭头。而且这不是一个“匿名函数的语法”。箭头函数是一种特殊类型的函数。controller 期望一个构造函数，而箭头函数永远不能是构造函数。 - undefined

可能是箭头函数与函数声明/表达式的重复问题：它们是否等价/可互换？的重复问题。 - undefined

Answer 1

在这种情况下，您需要使用函数而不是 ()=>。

如果您执行以下操作：

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

如果你在这里使用箭头函数，this === window。控制器需要一个真正的作用域才能正常工作。我非常确定你不想让窗口成为应用程序中所有控制器的通用对象 :)

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

- Yoann Prot

Answer 2

Angular调用控制器函数的方式如下：fn.apply(self, args);其中self（在被调用的函数中变成this）是一个具有所需字段的对象 - 例如，在示例中是myVariable。

箭头函数忽略apply的第一个参数。因此，正如@Yoann所说，我们必须使用function() {...}而不是() => {...}。

- whistling_marmot