Angular JSは親スコープへの子スコープの変数の変更を反映します

Question

どのように変数を変更し、ChildCtrlで 'new' varがインスタンス化されているにもかかわらず、それらをParentCtrlに容易に伝播できますか？時計のは（それが簡単に実現することができる）のと$には$を最小限

ParentCtrl

• ChildCtrl/ChildCtrl2/ChildCtrl3/ChildCtrl4

  • ビュー

のための余分なポイント

私のChildCtrlはちょうど私が簡単に抽象化できないほど十分に異なっていますasterレイアウトとng-viewがありますが、それらはすべてParentCtrlの同じ関数に依存しています。

$ scope.searchTermsはParentCtrlで定義されていますが、ng-model = 'searchTerms'の入力ボックスは子コントローラのビューにあります。このvarが変更されると、ParentCtrlにはChildCtrlsだけが反映されません。

例： http://jsfiddle.net/JHwxP/22/

HTML部分

<div ng-app> 
    <div ng-controller="Parent"> 
     parentX = {{x}} <br/> 
     parentY = {{y}}<br/> 
     <div ng-controller="Child"> 
      childX = {{x}}<br/> 
      childY = {{y}}<br/> 
      <a ng-click="modifyBothScopes()">modifyBothScopes</a><br> 
      <br> 
      The changes here need to appear in 'Parent'. <input ng-model='y'> 
     </div> 
    </div> 
</div> 

コントローラ

function Parent($scope) { 
    $scope.x= 5; 
    $scope.y= 5; 
} 

function Child($scope) { 
    $scope.modifyBothScopes= function() { 
     $scope.$parent.x++; 
    }; 
} 

UPDATE

私は現在共有サービスアプローチをしようとしています：https://gist.github.com/exclsr/3595424

UPDATE

EMIT /放送システムをしようと

問題解決しよう： 私は親に$ scope.searchTermsを格納しており、変更が子$スコープ内のスペースを作成します。

解決策： 親で$ scope.search.termsを実行していて、子で変更したときに親にバブルするはずです。

例：http://jsfiddle.net/JHwxP/23/

Answer 1

これは継承がどのように機能するかを原型によるものです。

子コントローラで$scope.xを入力すると、xがスコープに定義されているかどうかを確認し、xが親スコープでない場合はxを探します。

子スコープのxプロパティに割り当てると、子スコープのみが変更されます。

これを処理して共有動作を取得する簡単な方法は、オブジェクトまたは配列を使用することです。ここ

function ParentCtrl($scope) { 
    $scope.model = {x: 5, y: 5}; 
} 

function ChildCtrl($scope) { 
    $scope.update = function(x, y) { 
    $scope.model.x = x; 
    $scope.model.y = y; 
    }; 
} 

$scope.model

は、親と子のスコープの両方で同じオブジェクトを参照するため、変更は、両方のスコープに表示されます。

John Lindquistにはvideo on thisがあります。

Answer 2

リファレンスで渡すオブジェクトを多数作成することを伴わない別の解決策は、親コントローラにセッター関数を作成することです。

function ParentCtrl($scope) { 
    $scope.x = 5; 
    $scope.y = 5; 

    $scope.setX = function(value) { 
    $scope.x = value; 
    } 

    $scope.setY = function(value) { 
    $scope.y = value; 
    } 
} 

function ChildCtrl($scope) { 
    $scope.update = function(x, y) { 
    $scope.setX(x); 
    $scope.setY(y); 
    }; 
} 

データが同じオブジェクトの一部であることが理にかなっていない場合は、これをよりクリーンにすることができます。

また夢中になると子供にこのような何かを行うことができます：私はこのような何かを探していた

function ChildCtrl($scope) { 
    var superSetX = $scope.setX; 
    $scope.setX = function(value) { 
    superSetX(value * 2); 
    }; 
    ... 
} 

Answer 3

。最初の解決策は、thisを読んだ後です。子モデルと親モデルを共有することができます。

Here is an example。私は私のポイントを証明するためにアイテムの配列を使用しています。 ChildControllerは、が同じ宇宙の一部であるように、の親を変更しています。