0

この質問のjsFiddleはここにあります：http：//jsfiddle.net/Hsw9F/1/

JavaScript（jsFiddleconsole.logで利用可能なデバッグ情報）

var app = angular.module('StackOverflow',[]);

function ParentController($scope) {
 $scope.parentCounter = 5;
}

function ChildController($scope) {
  $scope.childCounter = $scope.parentCounter;
  $scope.increaseCounters = function() {
    ++$scope.parentCounter;
    ++$scope.childCounter;
  };
}

上記の例では、とという名前の親コントローラーと子コントローラーparentCounterにchildCounterそれぞれカウンターがあります。また、子コントローラーに、increaseCounters()両方のカウンターを1つ増やすという名前の関数を提供しました。

これらのカウンターは両方ともページに表示されます。

<div ng-app="StackOverflow">
  <div ng-controller="ParentController">

    Parent Counter: {{parentCounter}}<br />

    <div ng-controller="ChildController">
      Child Counter: {{childCounter}}<br />
      <a href="javascript:void(0)"
         ng-click="increaseCounters()">Increase Counters</a>
    </div><!-- END ChildController -->

  </div><!-- END ParentController -->
</div><!-- END StackOverflow app -->

問題は、AngularJSがページ上のを更新していないようであり、カウンターの増加関数が呼び出され{{parentCounter}}たときにのみ更新されることです。{{childCounter}}見落としているものはありますか？

4

2 に答える 2

3

++$scope.parentCounter;parentCounter同じ名前の親スコーププロパティを非表示/シャドウする 名前の子スコーププロパティを作成します。

それを確認するには、increaseCounters（）関数に追加console.log($scope);してください。

1つの回避策：++$scope.$parent.parentCounter;

あなたが経験している問題は、JavaScriptのプロトタイプの継承が機能する方法に関係しています。AngularJSのスコープのプロトタイプ/プロトタイプの継承のニュアンスは何ですか？を読むことをお勧めします。--プリミティブが子スコープで作成されたときに何が起こるかを説明するいくつかの素晴らしい写真があります。

于 2013-01-09T21:04:08.930 に答える
2

子コントローラーは親カウンター値のコピーを取得するためです。親コントローラーのカウンター値を増やしたい場合は、親コントローラーで関数を実行する必要があります。

function ParentController($scope) {
 $scope.parentCounter = 5;

  $scope.increaseParent = function() {
     ++$scope.parentCounter;
  };
}

function ChildController($scope) {
  $scope.childCounter = $scope.parentCounter;
  $scope.increaseCounters = function() {
    console.log('-------------------------------------');
    console.log('parent before: ' + $scope.parentCounter);
    console.log('child before: ' + $scope.childCounter);
    $scope.increaseParent();
    ++$scope.childCounter;
    console.log('parent after: ' + $scope.parentCounter);
    console.log('child after: ' + $scope.childCounter);
  };
}
于 2013-01-09T21:15:37.537 に答える