web-dev-qa-db-ja.com

AngularJS ng-ifとスコープ

Ng-ifとスコープを理解しようとしています。私が知っているように、ng-ifは新しい子スコープを作成します。私の問題は次のとおりです。

表示する

<input ng-model="someValue1" />
<div ng-if="!someCondition">
    <input ng-model="$parent.someValue2" />
</div>

コントローラ

$scope.someCondition = true;

if ($scope.someCondition) {
    $scope.someValue2 = $scope.someValue1;        
}

SomeConditionがtrueに設定されている場合、someValue2はsomeValue1と同じである必要があります。

私の問題は、両方の状況（trueまたはfalse）でsomeValue2にアクセスできないことです。どうすればこれを達成できますか？

angularjsangular-ng-if
19
be-codified

はい、ng-ifは新しい子スコープを作成します

ng-ifのモデルプロパティを監視するための経験則は次のとおりです。

モデルとしてスコープを使用しないでください

例えば.

ng-if='showStuff' //here my scope is model **INCORRECT**
ng-if='someObject.showStuff' // ** CORRECT **

Ng-modelでオブジェクトプロパティを使用します-ng-ifが新しい子スコープを作成した場合でも、親スコープに変更が加えられます。

動作するPlunkerを確認するには、こちらをご覧ください： http://jsfiddle.net/Erk4V/4/

27
Ankur Soni

ngIfは、実際にプロトタイプ継承を使用して新しいスコープを作成します。つまり、ngIfのスコープのプロトタイプオブジェクトは、その親のスコープのプロトタイプオブジェクトです。そのため、属性がスコープのngIfインスタンスで見つからない場合、その属性のプロトタイプオブジェクトチェーンを調べます。ただし、属性をスコープのインスタンスに割り当てると、その属性の継承チェーンは参照されなくなります。 JSで使用されるプロトタイプ継承を説明するリンクを次に示します。 https://github.com/angular/angular.js/wiki/Understanding-Scopes#javascript-prototypal-inheritance

これを解決する方法：

親コントローラー：

$scope.data = {someValue: true};

子コントローラー：

$scope.data.someValue = false

親のスコープで属性を非表示にしているのではなく、親のスコープでオブジェクトを変更しているだけなので、実際には親のデータオブジェクトが変更されます。あなたの場合：

<input ng-model="data.someValue1" />
<div ng-if="!data.someCondition">
    <input ng-model="data.someValue2" />
</div>
13
user133688