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

@Gajus Kuizinas und @CodeHater haben recht. Hier gebe ich nur ein Beispiel. Während wir mit ng-if arbeiten, werden die gesamten HTML-Elemente aus dem DOM entfernt, wenn der zugewiesene Wert falsch ist. Wenn der zugewiesene Wert wahr ist, werden die HTML-Elemente im DOM sichtbar. Und der Scope wird im Vergleich zum Elternscope anders sein. Aber im Falle von ng-show zeigt es nur die Elemente basierend auf dem zugewiesenen Wert an oder versteckt sie. Aber es bleibt immer im DOM. Nur die Sichtbarkeit ändert sich je nach dem zugewiesenen Wert.

http://plnkr.co/edit/3G0V9ivUzzc8kpLb1OQn?p=preview

Hoffentlich wird Ihnen dieses Beispiel bei der Verständnis der Scopes helfen. Versuchen Sie, falsche Werte für ng-show und ng-if anzugeben und überprüfen Sie den DOM in der Konsole. Versuchen Sie, die Werte in den Eingabefeldern einzugeben und beobachten Sie den Unterschied.

Hallo Plunker!

    ng-show=true :: 

    ng-if=true :: 

{{data}}

Answer 2

Tatsache, dass die ng-if-Direktive im Gegensatz zu ng-show einen eigenen Scope erstellt, führt zu einem interessanten praktischen Unterschied:

angular.module('app', []).controller('ctrl', function($scope){
  $scope.delete = function(array, item){
    array.splice(array.indexOf(item), 1);
  }
})

   ng-if:

        {{show}}
        Löschen {{show}}
        Ja {{show}}
        Nein

   ng-show:

        {{show}}
        Löschen {{show}}
        Ja {{show}}
        Nein

   ng-if mit $parent:

        {{show}}
        Löschen {{$parent.show}}
        Ja {{$parent.show}}
        Nein

Bei der ersten Liste wird beim on-click-Event die Variable show aus dem inneren/eigenen Scope geändert, aber ng-if überwacht eine andere Variable aus dem äußeren Scope mit demselben Namen, daher funktioniert die Lösung nicht. Im Fall von ng-show haben wir nur eine show-Variable, daher funktioniert es. Um den ersten Versuch zu korrigieren, sollten wir auf show aus dem Eltern-/äußeren Scope über $parent.show verweisen.

Answer 3

1. ng-if, wenn falsch, entfernt Elemente aus dem DOM. Das bedeutet, dass alle Ereignisse und Direktiven, die an diese Elemente angehängt sind, verloren gehen. Zum Beispiel wird bei einem ng-click auf eines der Kinderelemente, wenn ng-if auf falsch auswertet, dieses Element aus dem DOM entfernt und wieder erstellt, wenn es wahr ist.

2. ng-show/ng-hide entfernt die Elemente nicht aus dem DOM. Es verwendet CSS-Stile (.ng-hide), um Elemente auszublenden/einzublenden. Auf diese Weise gehen Ihre Ereignisse und Direktiven, die an Kindern angehängt waren, nicht verloren.

3. ng-if erstellt einen Kindbereich, während ng-show/ng-hide das nicht tut.

Answer 4

Ng-show und ng-hide funktionieren auf entgegengesetzte Weise. Der Unterschied zwischen ng-hide oder ng-show mit ng-if ist, dass wenn wir ng-if verwenden, wird das Element im DOM erstellt, aber mit ng-hide/ng-show wird das Element vollständig ausgeblendet.

ng-show=true/ng-hide=false:
Element wird angezeigt

ng-show=false/ng-hide=true:
Element wird versteckt

ng-if =true
Element wird erstellt

ng-if= false
Element wird im DOM erstellt.

Answer 5

Zu beachten, etwas das mir jetzt passiert ist: ng-show versteckt den Inhalt über CSS, ja, aber es führte zu seltsamen Fehlern in div's, die als Buttons vorgesehen waren.

Ich hatte eine Karte mit zwei Buttons unten und je nach tatsächlichem Zustand wird einer durch einen dritten ersetzt, zum Beispiel der Bearbeitungsbutton mit einem neuen Eintrag. Wenn ich ng-show=false benutze, um den linken (im Code als erster vorkommenden) zu verstecken, passierte es, dass der folgende Button mit dem rechten Rand außerhalb der Karte landete. ng-if behebt das, indem es den Code überhaupt nicht einbezieht. (Habe nur hier überprüft, ob es einige versteckte Überraschungen gibt, ng-if anstelle von ng-show zu verwenden)