Warum das Ändern eines Bereichs in einem ng-if-Funktionsaufruf nicht funktioniert - AngularJS

Question

Im Folgenden sind die Codeschnipsel, in denen ich den hideQA Wert umschalte, der Wert ändert sich ordnungsgemäß in beiden Bedingungen, aber nicht die Divs ordnungsgemäß zu verbergen wenn ich tue -

`<button ng-click="hideQA = !hideQA">Reset</button>` 

Aber es arbeitet korrekt, wenn ich den Wert von einem Verfahren am Wechsel, wie -

`<button ng-click="resetForm()">Reset</button>` 

Kann jemand, den Grund für das erklären?

Arbeits Plnkr - http://plnkr.co/edit/rIAAcibX2Ts1VaMWKQtc?p=preview

Answer 1

ng-if hat seine eigene $scope und wenn das Element wird entfernt, die $scope entfernt auch. So müssen Sie in übergeordneten Bereich Referenz mit $parent

<button ng-click="$parent.hideQA = !hideQA">Reset</button> 

Eine weitere Option ist das ng-show

<div class="message" ng-show="hideQA !== false"> 
    This is div two !!! 
    <button ng-click="hideQA = !hideQA">Reset</button> 
</div> 

Answer 2

Dies ist aufgrund der Begrenzung von inhertance zwischen Rahmen.

Um kein Problem damit zu haben, müssen Sie Punktnotation verwenden.

Siehe plunkr: http://plnkr.co/edit/ES9qTl7nsmGGOJnE0H8u?p=preview

Siehe Artikel für weitere Erklärung über die Punktnotation

Hier ist das, was mit Punktnotation wie Ihr Code aussehen:

<button ng-click="a.hideQA = !a.hideQA">Reset</button> 
$scope.a = {hideQA:false}; 
$scope.a.hideQA = true; 

Answer 3

Antwort oben angegebenen bereits dieses Problem zu lösen. Hier ist mein funktionierender Plunkr-Link: http://plnkr.co/edit/ZdL441bBmQToGZn4gfQt?p=preview. Und ich werde sagen etwas anderes:

Wenn Sie ng-if verwenden wird es einen eigenen Rahmen schafft, von AngularJS offizielle Dokumentation:

Der Umfang innerhalb ngIf erstellt von seinem übergeordneten Rahmen erbt prototypal inheritance verwenden.

In einem kurzen, als der Wert bezieht sich daraus geordneten Bereich ist, wird nur Wert für Primärtyp (wie string, integer, boolean und etc.), aber nicht kopiert Wert Referenz (oder pointer). Was bedeutet, dass es eine einseitige Referenz ist, nicht die Zwei-Wege. Um die beste Methode zu verwenden, verwenden Sie immer javascript object {attr: value}. Und deshalb wird . empfohlen.

Hier ist ein sehr guter Artikel, die im Wert von 20 Minuten über die Bereiche https://github.com/angular/angular.js/wiki/Understanding-Scopes

Hoffnung bereiten diese Ihnen helfen kann :)