2013-06-04 16 views
108

2つのコントローラを別のものにラップしています。今私は、子スコープが親スコープからプロパティを継承するが、親スコープ変数を更新する方法があることを知っている?これまで私は明らかな解決策を見つけていませんでした。親スコープ変数を更新する

私の状況では、フォーム内にカレンダーコントローラがあります。親のスコープ(フォーム)の開始日と終了日を更新して、フォームに送信時に開始日と終了日が設定されるようにしたいと考えています。

+0

音指令でなければなりません。 – Jonah

答えて

177

あなたが親スコープにオブジェクト(プリミティブではない)を使用する必要があり、その後、あなたは子スコープ

親から直接それを更新することができるようになります。

app.controller('ctrlParent',function($scope){ 
    $scope.parentprimitive = "someprimitive"; 
    $scope.parentobj = {}; 
    $scope.parentobj.parentproperty = "someproperty"; 
}); 

チャイルド:

app.controller('ctrlChild',function($scope){ 
    $scope.parentprimitive = "this will NOT modify the parent"; //new child scope variable 
    $scope.parentobj.parentproperty = "this WILL modify the parent"; 
}); 

の作業のデモhttp://jsfiddle.net/sh0ber/xxNxj/

What are the nuances of scope prototypal/prototypical inheritance in AngularJS?

+1

私はこれを実装しようとするとこのエラーが発生します: 'プロパティを設定できません'の親プロパティ '未定義'。 – Malcr001

+0

コードを投稿できますか?それはフィドルのデモで働いています。カレンダーコントロールが分離スコープを使用する場合、親スコープから継承されないため、ディレクティブのスコープに値を渡す必要があります。 – sh0ber

+0

申し訳ありません、この質問は忘れました。私はそれを受け入れました。結局、私はこの答えの助けを借りて作業を進めることができたからです。 – Malcr001

4

スコープにプリミティブ属性を割り当てると、それは親スコープが持つ属性を持っていても、(おそらくその場で作成)スコープへ常にローカルでを参照してください同じ名前。これは設計上の決定であり、良いIMHOです。

ビューから、親スコープにいくつかのプリミティブ(int型、ブール値、文字列)を変更する必要がある場合、あなたはそれがその範囲内の別のオブジェクトの属性である必要があり、その割り当てが読むことができる:

<a ng-click="viewData.myAttr = 4">Click me!</a> 

、それは、順番になります。

  1. は、それがそのmyAttr属性に
  2. アサイン4で定義されているものの範囲からviewDataオブジェクトを取得します。
5

これも(これがベストプラクティスかに従っているかどうかを確認してくださいではなく)作品

app.controller('ctrlParent',function($scope) { 
    $scope.simpleValue = 'x'; 
}); 

app.controller('ctrlChild',function($scope){ 
    $scope.$parent.simpleValue = 'y'; 
}); 
+1

$ scope。$ parent.valueを使うと正しいですが、大抵の場合はうまくいきますが、大規模で複雑なプロジェクトでは管理が難しくなるので、通常は広範囲に使用することをお勧めしません。 –

104

このタスクを実行すると$scope.$parent変数を使用しないようにもう一つの方法があります。

親スコープの値を変更する方法を準備し、それを子スコープ内で使用するだけです。このように:

app.controller('ctrlParent',function($scope) { 
    $scope.simpleValue = 'x'; 
    $scope.changeSimpleValue = function(newVal) { 
    $scope.simpleValue = newVal; 
    }; 
}); 

app.controller('ctrlChild',function($scope){ 
    $scope.changeSimpleValue('y'); 
}); 

また、値の変更をより詳細に制御できます。

また、このメソッドをHTMLの場合でも、<a ng-click="changeSimpleValue('y')" href="#">click me!</a>のように呼び出すことができます。

+10

私はなぜこの答えがより多くのupvotes、その良い提案を取得しないか分からない。 – JBCP

+0

優秀な回答!! –

+0

素晴らしい答え!!! – zuozuo

2

親で宣言された変数にアクセスするために、我々は

コントローラでは、子コントローラまたはテンプレートファイルに

を$親を使用する必要があります

$scope.$parent.varaiable_name 

HTMLテンプレートでカレンダーのコントローラのような

ng-model="$parent.varaiable_name" 
関連する問題