AngularJS中范围的继承

在父控制器范围中,我已经定义了设置为“x”的selectedItem.然后在子范围中,我使用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’.

但是当我在CtrlA范围内检查$scope.selectedItem时(使用AngularJS的batarang),它会给出’x’.

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

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

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

我不想使用事件或rootScope更新父范围中的selectedItem(用于学习目的).

如果尝试绑定到父作用域上声明的基元,则子作用域中的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'
  };
}

原文地址：https://www.jb51.cc/angularjs/143650.html