[英]AngularJS Directive Isolate scope behavior
I'm working through some tutorials trying to firm up my grasp of isolate scope and I'm having some issues. 我正在研究一些教程,试图巩固我对隔离范围的了解,但遇到了一些问题。 I get the high concept but I'm trying to justify some behavior I'm seeing that I don't understand.
我有很高的概念,但是我想证明我不理解的某些行为是正确的。 At a high level the way I understand it, the options attached work like this:
从较高的角度来看,所附选项的工作方式如下:
@ - allows you to feed in a string & - provides one way data binding = - provides two way data binding @-允许您输入字符串&-提供一种方式的数据绑定=-提供两种方式的数据绑定
So considering the following code: 因此,请考虑以下代码:
<div ng-app="choreApp">
<div ng-controller="ChoreCtrl">
<kid done="logChore(chore)"></kid>
</div>
</div>
var app = angular.module('choreApp', []);
app.controller("ChoreCtrl", function($scope){
$scope.logChore = function(chore){
alert(chore + " is done!");
};
});
app.directive("kid", function() {
return {
restrict: "E",
scope: {
done: "&"
},
template: '<input type="text" ng-model="chore">' +
'{{chore}}' +
'<div class="button" ng-click="done({chore: chore})">I\'m done</div>'
};
});
The above is wired up ok, with the '&' the logChore function works, all is well. 上面已经连接好了,使用'&'logChore函数可以正常工作。
The '@' doesn't work, as expected, since it is just reading in a string, when I click nothing happens. 正如预期的那样,“ @”不起作用,因为它只是读入一个字符串,当我单击时什么也没发生。
However, I also expect '=' to work ok since it's just a two way binding, however what actually happens is the function executes three times without any action on my part (the click), then is seems to function as normal. 但是,我也希望'='可以正常工作,因为它只是一种双向绑定,但是实际上发生的是该函数执行了3次却没有任何动作(单击),然后似乎正常运行。 Why does the function execute three times?
为什么函数执行三次?
When you use two way binding ("=") with done="logChore(chore)"
, the results of calling logChore(chore)
are assigned to done
- not the function itself (as &
does). 当您使用双向绑定(“=”)与
done="logChore(chore)"
, 呼吁的结果logChore(chore)
被分配到done
-而不是函数本身 (如&
一样)。
So every time Angular calls $watch
to see if anything it's watching has changed the function logChore(chore)
is called. 因此,每次Angular调用
$watch
来查看其监视的内容是否已更改时,都会调用logChore(chore)
函数。 Because of dirty checking $watch
often evaluates the watch list multiple times per $digest
loop- that's why you saw 3 executions (and you'd see more any time something happens that triggers a $digest
). 因为检查不干净,所以
$watch
通常会在每个$digest
循环中多次评估监视列表-这就是为什么您看到3次执行的原因(而且在任何触发$digest
事件发生时,您都会看到更多)。
In order to pass the function itself in when using =
you can do this: 为了在使用
=
时传递函数本身,您可以执行以下操作:
<kid done="logChore"></kid>
And change you template to pass in chore like so: 并更改您的模板以像这样传递杂务:
ng-click="done(chore)"
Here's a fiddle of that working. 这是工作的一个小提琴 。
Also, rather than thinking of @
as passing in a string I'd think of it more broadly as one-way data binding. 另外,与其将
@
视为传入字符串,不如将其更广泛地视为单向数据绑定。 It's one-way because a change on the parent scope will be reflected inside the directive, but a change in the directive's isolate scope won't be reflected in the parent. 这是单向的,因为对父作用域的更改将反映在指令内部,但对指令的独立作用域的更改将不会反映在父指令中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.