6

在父控制器范围内，我已定义selectedItem设置为“x”。然后在子范围内，我selectedItem使用 ngModel 定义：

<div ng-app>
  <div ng-controller="CtrlA">
       <div ng-controller="CtrlB">
         <select ng-model="selectedItem" ng-options="item for item in items">
         </select>
      </div>
  </div>
</div>

function CtrlA($scope) {
    $scope.selectedItem = 'x';
    $scope.items = ['x', 'y'];
}

function CtrlB($scope) {}

加载页面时，selectedItem按预期正确设置为“x”。当我选择“y”时，selectedItem在 CtrlB $scope 中按预期给出“y”。

但是当我$scope.selectedItem在CtrlA范围内检查时（使用 AngularJS 的batarang），它给出了 'x' 。

jsFiddle：http: //jsfiddle.net/sudhh/GGKjp/2/

预览页面：http : //fiddle.jshell.net/sudhh/GGKjp/2/show/light/（用于使用 angularjs batarang 进行检查）

为什么范围$scope.selectedItem内CtrlA没有更新为“y”？解释是什么？

我不喜欢在父范围内使用事件或rootScope更新selectedItem（出于学习目的）。

4

2 回答 2

7

如果您尝试绑定到在父作用域上声明的原语，则子作用域中的 selectedItem 将有效地隐藏父作用域中的同名属性。

在这种情况下，有 3 个选择

  1. 在模型的父对象中定义对象，然后在子对象中引用该对象的属性：ref.selectedItem
  2. 使用 $parent.selectedItem （并非总是可能，但比 1 更容易。如果可能的话）
  3. 在父范围上定义一个函数，并从子级调用它，将原始值传递给父级（并非总是可能）

有关它的更多信息，请访问https://github.com/angular/angular.js/wiki/The-Nuances-of-Scope-Prototypal-Inheritance

您可以在http://jsfiddle.net/sudhh/XU2rP/1/使用第一种方法找到更新的小提琴

function CtrlA($scope) {
  $scope.items = ['x', 'y'];
  $scope.ref = {
    selectedItem: 'x'
  };
}
于 2013-01-09T11:37:34.913 回答
0

我注意到在类似的情况下AngularJS不能selectedItem正常观看。我发现的唯一方法是使用数组selectedItem中的条目进行初始化。items尝试以下操作：

function CtrlA($scope) {
    $scope.items = ['x', 'y'];
    $scope.selectedItem = $scope.items[0];
}
于 2013-01-09T10:01:30.737 回答