angularjs - AngularJS 中作用域的继承

Question

在父 Controller 范围内，我定义了 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在父范围内(用于学习目的)。

Answer 1

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

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

在模型的父对象中定义对象，然后引用
子对象中该对象的属性:ref.selectedItem

使用 $parent.selectedItem (并非总是可能，但比 1.
在可能的情况下)

在父作用域上定义一个函数，并从子作用域调用它，
将原始值传递给父级(并非总是可能)

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

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

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