47

ChildCtrl で「新しい」変数がインスタンス化されているにもかかわらず、変数の変更を取得して ParentCtrl に簡単に反映するにはどうすればよいですか? $on と $watch が最小限またはまったくない場合の追加ポイント (実装が容易になります)

親コントロール

  • ChildCtrl / ChildCtrl2 / ChildCtrl3 / ChildCtrl4

    • 意見

私の ChildCtrl は、マスター レイアウトと 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++;
    };  
}

アップデート

現在、共有サービスのアプローチを試みています: https://gist.github.com/exclsr/3595424

アップデート

エミット/ブロードキャストシステムを試す

解決しよう 問題: 親に $scope.searchTerms を保存していましたが、変更すると、子の $scope にスペースが作成されました。

解決策：親で $scope.search.terms を実行する必要があり、子で変更すると、親にバブルアップします。

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

4

3 に答える 3

87

これは、プロトタイプの継承がどのように機能するかによるものです。

子コントローラーで要求すると$scope.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 には、これに関するビデオがあります。

于 2013-06-06T22:31:02.797 に答える
0

私はこのようなものを探していました。最初の解決策は、これを読んだ後に来ました。親モデルを子コントローラーと共有できます。

ここに例があります。私は自分の主張を証明するために一連のアイテムを使用しています。ChildControllerは、すべて同じ宇宙の一部であるかのように、親を変更しています。

于 2013-10-26T21:31:55.723 に答える