web-dev-qa-db-ja.com

angularの親スコープ変数を更新します

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

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

113
Malcr001

親スコープでオブジェクト(プリミティブではない)を使用する必要があり、その後、子スコープから直接更新できるようになります。

親:

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/

AngularJSのスコーププロトタイプ/プロトタイプ継承のニュアンスは何ですか?

189
Dan

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

親スコープの値を変更するメソッドを準備し、子スコープで使用します。このような:

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

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

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

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

116
Ravbaker

これも機能します(ただし、これがベストプラクティスに従っているかどうかはわかりません)

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

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

プリミティブ属性をスコープに割り当てると、親スコープに同じ名前の属性が設定されている場合でも、スコープに対してalways local(その場で作成される場合があります)です。これは設計上の決定であり、私見としては良いことです。

ビューから親スコープのプリミティブ(int、boolean、strings)を変更する必要がある場合、そのスコープ内の別のオブジェクトの属性である必要があります。そのため、割り当ては次のようになります。

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

そして、それは順番に:

  1. 定義されているスコープからviewDataオブジェクトを取得します
  2. myAttr属性に4を割り当てます。
4
rewritten

親で宣言された変数にアクセスするには、子コントローラまたはテンプレートファイルで$ parentを使用する必要があります

コントローラー内

$scope.$parent.varaiable_name

HTMLテンプレートで

ng-model="$parent.varaiable_name"
2
Nibu