Question

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

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

在上面的示例中，我在父级中有一个计数器，子控制器分别名为parentCounter和childCounter。我还在名为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原型继承的工作方式有关。我建议阅读What are the nuances of scope prototypal / prototypical inheritance in AngularJS? - 它有一些很好的图片，解释了在子范围中创建基元时会发生什么。

Answer 2

因为子控制器获取父计数器值的副本。如果要增加父控制器计数器值，则需要在父控制器上执行一个函数：

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

当子控制器修改它们时，父范围变量不会在视图中更新

2 个答案: