AngularJS中范围的继承

时间:2013-01-09 09:50:35

标签: angularjs

在父控制器范围中,我定义了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(用于学习目的)。

2 个答案:

答案 0 :(得分:7)

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

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

  1. 在模型的父级中定义对象,然后引用a 子对象中该对象的属性:ref.selectedItem
  2. 使用$ parent.selectedItem(并非总是可行,但比1更容易。 在可能的情况下)
  3. 在父作用域上定义一个函数,并从子作用中调用它, 将原始值传递给父(不总是可能)
  4. 有关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'
      };
    }
    

答案 1 :(得分:0)

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

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