javascript - 当子 Controller 修改父作用域变量时，它们不会在 View 中更新

Question

这个问题的 jsFiddle 可以在这里找到:http://jsfiddle.net/Hsw9F/1/

JavaScript(console.log 调试信息可在 jsFiddle 中找到)

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;
  };
}

在上面的示例中，我在父 Controller 和子 Controller 中有一个计数器，分别名为 parentCounter 和 childCounter。我还在子 Controller 中提供了一个名为 increaseCounters() 的函数，该函数将两个计数器都加一。

这两个计数器都显示在页面上:

<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 -->

问题在于AngularJS似乎并没有更新页面上的{{parentCounter}}，而只在增加时更新{{childCounter}}调用计数器函数。有什么我忽略的吗？

Answer 1

++$scope.parentCounter; 创建一个名为 parentCounter 的子作用域属性，该属性隐藏/隐藏同名的父作用域属性。

将 console.log($scope); 添加到您的increaseCounters() 函数中以查看它。

一种解决方法:++$scope.$parent.parentCounter;

您遇到的问题与 JavaScript 原型(prototype)继承的工作方式有关。我建议阅读What are the nuances of scope prototypal / prototypical inheritance in AngularJS? -- 它有一些漂亮的图片解释了在子作用域中创建基元时会发生什么。