6

親コントローラーのスコープで、selectedItem「x」に設定されているものを定義しました。次に、子スコープで、selectedItemngModel を使用して定義しました。

<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」が返されます。

しかし、（AngularJSのbatarangを使用して）スコープ内で検査すると、 'x' が得られます$scope.selectedItem。CtrlA

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

プレビュー ページ: http://fiddle.jshell.net/sudhh/GGKjp/2/show/light/ (angularjs バットランでの検査用)

$scope.selectedItem範囲内CtrlAが「y」に更新されないのはなぜですか? 説明は何ですか？

イベントを使用したり、親スコープでrootScope更新selectedItemしたりしないことを好みます (学習目的で)。

4

2 に答える 2

7

親スコープで宣言されたプリミティブにバインドしようとすると、子スコープの 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'
  };
}
于 2013-01-09T11:37:34.913 に答える
0

同様のケースで、 AngularJSselectedItemが適切に監視していないことに気付きました。私が見つけた唯一の方法は、配列selectedItemからのエントリで初期化することです。items次のことを試してください。

function CtrlA($scope) {
    $scope.items = ['x', 'y'];
    $scope.selectedItem = $scope.items[0];
}
于 2013-01-09T10:01:30.737 に答える