Was ist der Unterschied zwischen ng-if und ng-show/ng-hide

Question

Ich versuche den Unterschied zwischen ng-if und ng-show/ng-hide zu verstehen, aber sie sehen für mich gleich aus.

Gibt es einen Unterschied, den ich beachten sollte, wenn ich mich dafür entscheide, eins davon zu verwenden?

Answer 1

NgIf

Die Direktive ngIf entfernt oder erstellt erneut einen Teil des DOM-Baums basierend auf einem Ausdruck. Wenn der dem ngIf zugewiesene Ausdruck einen falschen Wert ergibt, wird das Element aus dem DOM entfernt, andernfalls wird ein Klon des Elements wieder in das DOM eingefügt.

Wenn ein Element mit ngIf entfernt wird, wird sein Scope zerstört und ein neuer Scope wird erstellt, wenn das Element wiederhergestellt wird. Der innerhalb von ngIf erstellte Scope erbt von seinem Eltern-Scope mittels prototypischer Vererbung.

Wenn ngModel innerhalb von ngIf verwendet wird, um an ein in dem Eltern-Scope definiertes JavaScript-Primitiv zu binden, haben Änderungen, die an der Variablen im Kind-Scope vorgenommen werden, keinen Einfluss auf den Wert im Eltern-Scope, z.B.

Um diese Situation zu umgehen und das Modell im Eltern-Scope von innerhalb des Kind-Scope aus zu aktualisieren, verwenden Sie ein Objekt:

Oder verwenden Sie die Variable $parent, um auf das Objekt des Eltern-Scope zu verweisen:

ngShow

Die Direktive ngShow zeigt oder verbirgt das angegebene HTML-Element basierend auf dem Ausdruck, der dem ngShow-Attribut übergeben wird. Das Element wird gezeigt oder verborgen, indem die ng-hide CSS-Klasse zum Element hinzugefügt oder entfernt wird. Die .ng-hide CSS-Klasse ist in AngularJS vordefiniert und setzt den Anzeigestil auf none (unter Verwendung einer !important Flagge).

Wenn der Ausdruck von ngShow zu false auswertet, wird die ng-hide CSS-Klasse zum class-Attribut auf dem Element hinzugefügt, wodurch es verborgen wird. Wenn er true ist, wird die ng-hide CSS-Klasse vom Element entfernt, wodurch das Element nicht versteckt erscheint.

Answer 2

Vielleicht ein interessanter Punkt ist der Unterschied in den Prioritäten zwischen beiden.

Soweit ich das beurteilen kann, hat die ng-if Direktive eine der höchsten (wenn nicht die höchste) Priorität aller Angular-Direktiven. Das bedeutet: Sie wird ZUERST ausgeführt, bevor alle anderen, niedriger priorisierten Direktiven. Die Tatsache, dass sie ZUERST ausgeführt wird, bedeutet, dass das Element effektiv entfernt wird, bevor alle inneren Direktiven verarbeitet werden. Oder zumindest: so sehe ich es.

Ich habe dies im UI beobachtet und verwendet, das ich für meinen aktuellen Kunden erstelle. Das gesamte UI ist ziemlich stark überfüllt und es gab überall ng-show und ng-hide. Ohne zu sehr ins Detail zu gehen, aber ich habe eine generische Komponente erstellt, die mithilfe von JSON-Konfigurationen verwaltet werden konnte, sodass ich einige Umschaltungen im Template vornehmen musste. Es gibt ein ng-repeat, und im ng-repeat wird eine Tabelle angezeigt, die viele ng-shows, ng-hides und sogar ng-switches enthält. Sie wollten mindestens 50 Wiederholungen in der Liste anzeigen, was dazu führen würde, dass mehr oder weniger 1500-2000 Direktiven aufgelöst werden müssten. Ich habe den Code überprüft und das Java-Backend + benutzerdefiniertes JS auf der Vorderseite würden etwa 150 ms dauern, um die Daten zu verarbeiten, und dann würde Angular etwa 2-3 Sekunden benötigen, bevor sie angezeigt werden. Der Kunde hat sich nicht beschwert, aber ich war entsetzt :-)

Bei meiner Recherche bin ich auf die ng-if Direktive gestoßen. Nun, vielleicht ist es am besten zu erwähnen, dass zum Zeitpunkt der Konzeption dieses UI, ng-if noch nicht verfügbar war. Da die ng-show und ng-hide Funktionen enthalten, die Booleans zurückgeben, konnte ich sie alle einfach durch ng-if ersetzen. Dadurch schien keine der inneren Direktiven mehr ausgewertet zu werden. Das bedeutete, dass ich wieder auf etwa ein Drittel aller ausgewerteten Direktiven zurückfiel und somit die UI-Geschwindigkeit auf eine Ladezeit von etwa 500 ms - 1 Sekunde beschleunigt wurde. (Ich habe keinen genauen Weg, um die genauen Sekunden zu bestimmen)

Beachten Sie: Die Tatsache, dass die Direktiven nicht ausgewertet werden, ist eine fundierte Vermutung darüber, was unter der Oberfläche passiert.

Also, meiner Meinung nach: Wenn Sie möchten, dass das Element auf der Seite vorhanden ist (zum Überprüfen des Elements oder was auch immer), aber einfach versteckt ist, verwenden Sie ng-show/ng-hide. In allen anderen Fällen verwenden Sie ng-if.

Answer 3

Die ng-if Direktive entfernt den Inhalt von der Seite und ng-show/ng-hide benutzt die CSS display Eigenschaft um den Inhalt zu verstecken.

Dies ist nützlich, wenn man :first-child und :last-child Pseudoselektoren zum Stylen verwenden möchte.

Answer 4

@EdSpencer hat Recht. Wenn Sie viele Elemente haben und ng-if verwenden, um nur die relevanten zu instanziieren, sparen Sie Ressourcen. @CodeHater hat auch teilweise Recht, wenn Sie ein Element sehr oft entfernen und anzeigen möchten, kann das Ausblenden anstelle des Entfernens die Leistung verbessern.

Der Hauptanwendungsfall, den ich für ng-if finde, ist, dass es mir ermöglicht, ein Element sauber zu validieren und zu eliminieren, wenn der Inhalt ungültig ist. Zum Beispiel könnte ich auf eine null Bildnamen-Variable verweisen und das würde einen Fehler auslösen, aber wenn ich ng-if und überprüfe, ob sie null ist, ist alles in Ordnung. Wenn ich ng-show gemacht hätte, würde der Fehler immer noch auftreten.

Answer 5

Eine wichtige Sache, die man über ng-if und ng-show beachten sollte, ist, dass es besser ist, ng-if zu verwenden, wenn Formularelemente verwendet werden, da es das Element vollständig aus dem DOM entfernt.

Dieser Unterschied ist wichtig, denn wenn Sie ein Eingabefeld mit required="true" erstellen und dann ng-show="false" verwenden, um es auszublenden, wird Chrome den folgenden Fehler anzeigen, wenn der Benutzer versucht, das Formular zu senden:

Ein ungültiges Formularelement mit dem Namen='' ist nicht fokussierbar.

Der Grund dafür ist, dass das Eingabefeld vorhanden ist und es required ist, aber da es verborgen ist, kann Chrome nicht darauf fokussieren. Dies kann Ihren Code buchstäblich brechen, da dieser Fehler die Skriptausführung stoppt. Seien Sie also vorsichtig!