web-dev-qa-db-fra.com

AngularJS ng-if et portées

J'essaie de comprendre ng-if et les portées. Comme je le sais, ng-if crée une nouvelle portée enfant. Voici mon problème:

Vue

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

Manette

$scope.someCondition = true;

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

Si someCondition est défini sur true, alors someValue2 doit être identique à someValue1.

Mon problème est que je ne peux pas accéder à someValue2 dans les deux situations (vrai ou faux). Comment pourrais-je y parvenir?

angularjsangular-ng-if
19
be-codified

Oui, ng-if crée une nouvelle portée enfant

Pour regarder une propriété de modèle dans un ng-if, la règle générale est la suivante:

N'UTILISEZ PAS LE SCOPE COMME MODÈLE

par exemple.

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

Utilisez une propriété d'objet dans ng-model - alors, même si ng-if crée la nouvelle portée enfant, la portée parent aura les modifications.

Pour voir un Plunker qui fonctionne, regardez ici: http://jsfiddle.net/Erk4V/4/

27
Ankur Soni

ngIf crée en effet une nouvelle portée utilisant l'héritage prototypique. Cela signifie que l'objet prototype de la portée de ngIf est celui de la portée de son parent. Donc, si l'attribut n'est pas trouvé sur l'instance ngIf de sa portée, il cherchera dans sa chaîne d'objets prototype pour cet attribut. Cependant, une fois que vous attribuez un attribut à l'instance de la portée, il ne cherchera plus dans sa chaîne d'héritage pour l'attribut. Voici un lien expliquant l'héritage prototypique utilisé dans JS: https://github.com/angular/angular.js/wiki/Understanding-Scopes#javascript-prototypal-inheritance

Comment résoudre ce problème:

Contrôleur parent:

$scope.data = {someValue: true};

Contrôleur enfant:

$scope.data.someValue = false

Parce que vous ne cachez pas un attribut sur la portée de son parent, vous mutez simplement un objet sur la portée de son parent, cela modifiera en effet l'objet de données du parent. Donc dans votre cas:

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