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) {}

功能CtrlA（$scope）{
$scope.selectedItem='x'；
$scope.items=['x'，'y']；
}
函数CtrlB（$scope）{}

加载页面时，

selectedItem

按预期正确设置为“x”。当我选择“y”时，CtrlB$scope中的

selectedItem

会按预期给出“y”

但是当我检查

$scope.selectedItem

在

CtrlA

scope（使用AngularJS的batarang）中时，它给出了“x”

jsFiddle：

预览页面：（用于使用angularjs batarang进行检查）

为什么

$scope.selectedItem

在

CtrlA

范围中没有更新为“y”？原因是什么

---

我不喜欢使用事件或

rootScope

来更新父范围中的

selectedItem

（出于学习目的）。

我注意到在类似情况下，无法正确观看

selectedItem

。我找到的唯一方法是使用

items

数组中的条目初始化

selectedItem

。请尝试以下操作：

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

---

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

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

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

使用$parent.selectedItem（不总是可能的，但比1简单。 （如有可能）

在父作用域上定义函数，并从子作用域调用它， 将基元值向上传递给父级（并非总是可能）

更多关于它的信息

您可以在以下位置使用第一种方法找到更新的小提琴：

---

还是不行。如果您从下拉列表中选择“y”并检查示波器，CtrlB会按预期显示“y”，但CtrlA仍会显示selectedItem，因为“x”Angular正在正确观察

selectedItem

。问题是有两个

selectedItem

属性——一个在父范围，一个在子范围。Angular正在正确但独立地观察他们两人。由于JavaScript原型继承的工作方式，子作用域只能看到其属性，父作用域只能看到其属性。您想要的是让子范围使用父范围中已经存在的属性，而不是创建新属性。（我确实看到@sudhakar已经找到了答案，我只是想澄清到底发生了什么。）事实上，我通过使用登录到控制台的手表对您的代码进行了一些扩展。只有B中的watch被触发。请务必阅读堆栈溢出问题，它提供了AngularJS中作用域继承的深入概述。

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