AngularJs ng-if funktioniert nicht für verschachtelte ng-if

Wie bereits erwähnt, erstellt ng-if einen eigenen Bereich.

Sie setzen checked1 in dem, was ich anrufe "Inner Scope 1". Dann benutze es in "Outer Scope". "Outer Scope" kann nicht in "Inner Scope 1" sehen, daher erstellt Javascript eine neue Variable checked1 auf "Outer Scope". Jetzt haben Sie zwei völlig verschiedene Variablen, die beide checked1 genannt werden - eine auf "Outer Scope" und eine auf "Inner Scope1". Das ist nicht was du willst.

Um dies zu beheben, müssen Sie checked1 im selben Bereich wie Sie es verwenden - "Outer Scope" einstellen. "Outer Scope" ist das übergeordnete Element von "Inner Scope1", also können wir $parent.checked1 wie folgt verwenden:

Jetzt gibt es nur eine Kopie von checked1 - die auf "Outer Scope". Und es funktioniert, überprüfen Sie es auf diesem aktualisierten Plünderer: Ссылка

ngIf erstellt einen anderen Bereich. Verwende $parent :

Plunk

Sie können ngShow anstelle von ngIf verwenden. ngShow hilft, da kein untergeordneter Bereich erstellt wird. Siehe Ergebnis hier .

Das Problem rührt daher, dass Sie für Ihr Datenmodell den primitiven Typ (boolesch) verwenden. Im Allgemeinen sollten Sie keine primitiven Typen für die Zwei-Wege-Datenbindung verwenden. Wenn Sie wissen wollen, warum ich Sie dazu ermuntere, dies zu lesen, Artikel wichtiger Teil ist:

  

Dies bedeutet, dass die ursprüngliche / übergeordnete Version der Eigenschaft nicht mit diesen Änderungen aktualisiert wird, wenn sich eine Eigenschaft innerhalb eines lokalen Bereichs ändert.

In Ihrem Fall geschieht Folgendes: - Sie verwenden den primitiven Typ boolean - ngIf erstellt / löscht seinen Bereich, während er von seinem übergeordneten Bereich erbt - Jede Änderung, die innerhalb des lokalen Bereichs ngIf vorgenommen wird, wird niemals an den übergeordneten Bereich weitergegeben. - Daher keine Aktualisierung des verschachtelten if.

Um das Problem zu beheben, verwenden Sie ein JS-Objekt, um Ihre Kontrollkästchen Werte wie folgt zu halten:

Beachten Sie, dass die Kontrollkästchen jetzt an boolesche Werte innerhalb eines js-Objekts gebunden sind.

Abgestufter Plunker wurde hier bearbeitet

Ich denke, das Problem hat damit zu tun, dass Sie nicht die ng-if verschachteln. Die zwei span -Tags sind Geschwister.

Meine Theorie lautet also, dass bei der Kompilierungsphase das ng-if , von dem Third abhängt, nicht ausgeführt werden kann. Es kann also nicht den gesamten Third -Teil der Vorlage aufbauen.

Dieser Plünderer funktioniert (mit verschachtelten Elementen).

Wenn ich meinen Plotter zu diesem ändere, funktioniert es nicht (mit Geschwistern):