0

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

JavaScript（jsFiddleconsole.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;
  };
}

在上面的示例中，我在父控制器和子控制器中有一个计数器，分别命名为parentCounterand 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}}调用增加计数器函数时更新。有什么我忽略的吗？

4

2 回答 2

3

++$scope.parentCounter;创建一个子范围属性，其名称parentCounter隐藏/隐藏同名的父范围属性。

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

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

您遇到的问题与 JavaScript 原型继承的工作方式有关。我建议阅读AngularJS中范围原型/原型继承的细微差别是什么？-- 它有一些很好的图片来解释在子作用域中创建原语时会发生什么。

于 2013-01-09T21:04:08.930 回答
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);
  };
}
于 2013-01-09T21:15:37.537 回答