[英]AngularJS change in directive's scope not updating parent controller scope
HTML: HTML:
<div ng-app="myApp" ng-controller="Controller">
<test ng-if="toggle" props="condition"></test>
</div>
Javascript: Javascript:
var myApp = angular.module('myApp', []);
myApp.controller('Controller', ['$scope', '$timeout', function($scope, $timeout) {
$scope.condition = [true];
$scope.toggle = $scope.condition[0];
$scope.$watch('condition', (newv, oldv, scope) => {
console.log('old: ' + oldv);
console.log('new: ' + newv);
console.log('toggle: ' + scope.toggle);
}, true);
}]);
myApp.directive("test", function() {
return {
template: '<div>directive show</div>',
replace: true,
scope: {
props: "="
},
controller: ['$scope', '$timeout', function($scope, $timeout) {
$scope.props[0] = false;
}]
}
});
The behavior is that after condition[0]
is changed by directive to false, I can see the new value in console log, but toggle
is not updating.行为是在指令将
condition[0]
更改为 false 后,我可以在控制台日志中看到新值,但toggle
没有更新。
My question is :我的问题是:
Why toggle
is not updating when condition[0]
is changed?为什么更改
condition[0]
时toggle
不更新? Why the digest cycle does not update toggle
as well?为什么摘要循环也不会更新
toggle
? Or does the digest cycle even update toggle
at all when its assigned value changed?或者当它的分配值发生变化时,摘要循环甚至更新
toggle
?
And I am NOT asking for a solution to this problem but the cause of this problem.我不是要解决这个问题,而是要解决这个问题的原因。
Thanks!谢谢!
Try to remove the replace: true
in the directive's config.尝试删除指令配置中的
replace: true
。
when using replace: true
, it will replace the directive tag with the content, so you will lose the ngIf
directive as the initial value for toggle
is true
.当使用
replace: true
时,它会将指令标签替换为内容,因此您将丢失ngIf
指令,因为toggle
的初始值为true
。
<test ng-if="toggle" props="condition"></test>
will be replaced with将被替换为
<div>directive show</div>
So the result will be所以结果将是
<div ng-app="myApp" ng-controller="Controller">
<div>directive show</div>
</div>
To me, your question looks like this:对我来说,你的问题是这样的:
var a = false; var b = a; console.log(a,b); var b = true; console.log(a,b);
Why is a
not true
after the second console.log
?为什么
a
在第二个console.log
之后不true
? Shouldn't a
and b
be the same? a
和b
不应该一样吗?
No, because a
and b
are separate entities.不,因为
a
和b
是独立的实体。
Similarly, when the code assigns the value false
to $scope.props[0]
in the directive's scope it is bound to $scope.condition[0]
of the parent scope.同样,当代码将值
false
分配给指令 scope 中的$scope.props[0]
时,它会绑定到父 scope 的$scope.condition[0]
。
$scope.toggle
and $scope.condition[0]
are separate entities. $scope.toggle
和$scope.condition[0]
是独立的实体。 a
does not change when b
changes. b
变化时a
不变。
$scope.toogle
does not change when $scope.condition[0]
changes.当
$scope.condition[0]
改变时,$ $scope.toogle
不会改变。
Why the digest cycle does not update toggle as well?
为什么摘要循环也不会更新切换? Or does the digest cycle even update toggle at all when its assigned value changed?
或者当它的分配值发生变化时,摘要循环甚至更新切换?
The ng-if="toggle"
directive creates a watch on $scope.toggle
. ng-if="toggle"
指令在$scope.toggle
上创建一个监视。 It never modifies $scope.toggle
.它从不修改
$scope.toggle
。
The props="condition"
binding creates a watch on $scope.props
of the directive and updates the value of $scope.condition
of the parent $scope
. props="condition"
绑定在指令的$scope.props
上创建一个监视并更新父$scope
的$scope.condition
的值。 Because it is a two-way binding, it also places a watch on $scope.condition
of the parent and updates the $scope.props
property of the directive.因为它是双向绑定,所以它还对父级的
$scope.condition
进行监视并更新指令的$scope.props
属性。
The $scope.toggle
property is never updated by the AngularJS framework or its digest cycle. $scope.toggle
属性永远不会被 AngularJS 框架或其摘要周期更新。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.