Question

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

<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'时，CtrlB $ scope中的selectedItem会按预期给出'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（用于学习目的）。

Answer 1

如果尝试绑定到父作用域上声明的基元，则子作用域中的selectedItem将有效地遮蔽父作用域中同名属性。

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

在模型的父级中定义对象，然后引用a 子对象中该对象的属性：ref.selectedItem
使用$ parent.selectedItem（并非总是可行，但比1更容易。在可能的情况下）
在父作用域上定义一个函数，并从子作用中调用它，将原始值传递给父（不总是可能）

有关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'
  };
}

Answer 2

在类似情况下，我注意到AngularJS没有正确观看selectedItem。我找到的唯一方法是使用selectedItem数组中的条目初始化items。请尝试以下方法：

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

AngularJS中范围的继承

2 个答案: