使用粗箭头将范围变量传递给 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() {...}
而不是 () => {...}
.
我正在更新 AngularJS 应用程序以对匿名函数使用粗箭头语法。我知道我
<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() {...}
而不是 () => {...}
.