[英]Parent scope variables don't update in the view when child controllers modify them
The jsFiddle for this question can be found here: http://jsfiddle.net/Hsw9F/1/ 可以在这里找到关于这个问题的jsFiddle: http : //jsfiddle.net/Hsw9F/1/
JavaScript ( console.log
debug information available in the jsFiddle ) JavaScript ( jsFiddle中提供了
console.log
调试信息)
var app = angular.module('StackOverflow',[]);
function ParentController($scope) {
$scope.parentCounter = 5;
}
function ChildController($scope) {
$scope.childCounter = $scope.parentCounter;
$scope.increaseCounters = function() {
++$scope.parentCounter;
++$scope.childCounter;
};
}
In the example above I have a counter in the parent and the child controllers named parentCounter
and childCounter
respectively. 在上面的示例中,我在父控制器和子控制器中分别有一个计数器,分别命名为
parentCounter
和childCounter
。 I've also provided a function in the child controller named increaseCounters()
that increases both counters by one. 我还在子控制器中提供了一个名为
increaseCounters()
的函数,该函数将两个计数器都增加一个。
Both of these counters are displayed on the page: 这两个计数器都显示在页面上:
<div ng-app="StackOverflow">
<div ng-controller="ParentController">
Parent Counter: {{parentCounter}}<br />
<div ng-controller="ChildController">
Child Counter: {{childCounter}}<br />
<a href="javascript:void(0)"
ng-click="increaseCounters()">Increase Counters</a>
</div><!-- END ChildController -->
</div><!-- END ParentController -->
</div><!-- END StackOverflow app -->
The problem is that AngularJS doesn't seem to update the {{parentCounter}}
on the page, and only updates the {{childCounter}}
when the increase counters function is called. 问题是AngularJS似乎不更新页面上的
{{parentCounter}}
,而仅在调用增加计数器功能时更新{{childCounter}}
。 Is there anything I have overlooked? 有什么我忽略的吗?
++$scope.parentCounter;
creates a child scope property with name parentCounter
that hides/shadows the parent scope property of the same name. 创建一个名称为
parentCounter
的子范围属性,该属性隐藏/阴影相同名称的父范围属性。
Add console.log($scope);
添加
console.log($scope);
to your increaseCounters() function to see it. 到您的gainCounters()函数中查看它。
One workaround: ++$scope.$parent.parentCounter;
一种解决方法:
++$scope.$parent.parentCounter;
The problem you are experiencing has to do with the way JavaScript prototypal inheritance works. 您遇到的问题与JavaScript原型继承的工作方式有关。 I suggest reading What are the nuances of scope prototypal / prototypical inheritance in AngularJS?
我建议阅读AngularJS中范围原型/原型继承的细微差别? -- it has some nice pictures explaining what happens when primitives are created in child scopes.
-它有一些漂亮的图片,解释了在子范围内创建基元时会发生什么。
Because the child controller gets a copy of the parent counter value. 因为子控制器获取父计数器值的副本。 If you want to increase the parent controller counter value, you need to execute a function on the parent controller:
如果要增加父控制器的计数器值,则需要在父控制器上执行一个函数:
function ParentController($scope) {
$scope.parentCounter = 5;
$scope.increaseParent = function() {
++$scope.parentCounter;
};
}
function ChildController($scope) {
$scope.childCounter = $scope.parentCounter;
$scope.increaseCounters = function() {
console.log('-------------------------------------');
console.log('parent before: ' + $scope.parentCounter);
console.log('child before: ' + $scope.childCounter);
$scope.increaseParent();
++$scope.childCounter;
console.log('parent after: ' + $scope.parentCounter);
console.log('child after: ' + $scope.childCounter);
};
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.