2017-05-27 1 views
2

J'ai ce code. Logiquement, cela devrait aller dans une boucle de rendu infinie. Mais il reste stable et la sortie est que a et b, les deux, sont imprimés ensemble.Pourquoi cela ne provoque-t-il pas une boucle infinie?

<div ng-if='hello'> 
    <span ng-init='hello=false'>a</span> 
</div> 
<div ng-if='!hello'> 
    <span ng-init='hello=true'>b</span> 
</div> 

Cela ne fait partie de rien sur quoi je travaille. Ça a juste surgi dans ma tête et je n'ai pas trouvé de réponse à ça nulle part.

Modifier

Je comprends que, dans mon exemple ci-dessus comme @dfsq a souligné, ng-if crée une nouvelle portée. J'ai donc changé le code un peu en this example. Donc, ici, les deux ng-if devraient se référer au même objet. Pourquoi ne va-t-il pas en boucle ici?

HTML

<div ng-app='app'> 
    <div ng-controller='appCtrl'> 
    <div ng-if='object.hello'> 
     <span ng-init='object.hello=false'>a</span> 
    </div> 
    <div ng-if='!object.hello'> 
     <span ng-init='object.hello=true'>b</span> 
    </div> 
    </div> 
</div> 

JS

(function() { 
    var app = angular.module("app", []); 

    app.controller("appCtrl", [ 
    "$scope", 
    function($scope) { 
     $scope.object = {}; 
     $scope.object.hello = true; 
    } 
    ]); 
})(); 
+1

ng-si crée un nouveau champ d'application, de sorte qu'ils ne font pas référence à la même instance –

Répondre

3

Logiquement, cela devrait aller dans une boucle infinie rendre.

Non, il ne devrait pas. La directive ngIf crée une nouvelle portée enfant, et à cause de cela ngInit modifie (crée) un indicateur indépendant, ce qui n'affecte pas celui utilisé dans ngIf (portée parent hello).

+0

Merci. J'ai mis à jour ma question avec un lien codepen. Pourquoi est-il encore stable? – Anubhav

0

Comme @dfsq mencioned, ng, si crée une nouvelle portée, si vous voulez créer une boucle infinie, vous devez utiliser quelque chose comme:

<div ng-if='hello'> 
    <span ng-init='$parent.hello=false'>a</span> 
</div> 
<div ng-if='!hello'> 
    <span ng-init='$parent.hello=true'>b</span> 
</div>