AngularJS 中范围的继承

在父控制器范围中，我定义了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 in CtrlA范围（使用 AngularJS 的 batarang），它给出 'x' 。

js小提琴：http://jsfiddle.net/sudhh/GGKjp/2/

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

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

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

如果您尝试绑定到在父作用域中声明的原语，则子作用域中的 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'
  };
}