Ich verstehe das ng-show
und ng-hide
beeinflusse die Klasse, die für ein Element festgelegt ist, und das ng-if
steuert, ob ein Element als Teil des DOM gerendert wird.
Gibt es Richtlinien für die Auswahl ng-if
über ng-show
/ ng-hide
oder umgekehrt?
angularjs
angularjs-directive
Patrice Chalin
quelle
quelle
Antworten:
Hängt von Ihrem Anwendungsfall ab, aber um den Unterschied zusammenzufassen:
ng-if
entfernt Elemente aus DOM. Dies bedeutet, dass alle Ihre Handler oder alles andere, was mit diesen Elementen verbunden ist, verloren gehen. Wenn Sie beispielsweise einen Klick-Handler an eines der untergeordneten Elemente gebunden haben und alsng-if
falsch ausgewertet werden, wird dieses Element aus dem DOM entfernt und Ihr Klick-Handler funktioniert auch nach einerng-if
späteren Auswertung als wahr nicht mehr und zeigt das Element an. Sie müssen den Handler wieder anbringen.ng-show/ng-hide
entfernt die Elemente nicht aus DOM. Es verwendet CSS-Stile, um Elemente auszublenden / anzuzeigen (Hinweis: Möglicherweise müssen Sie Ihre eigenen Klassen hinzufügen). Auf diese Weise gehen Ihre Handler, die an Kinder gebunden waren, nicht verloren.ng-if
Erstellt einen untergeordneten Bereich, währendng-show/ng-hide
dies nicht der Fall istElemente, die sich nicht im DOM befinden, wirken sich weniger auf die Leistung aus, und Ihre Webanwendung scheint im
ng-if
Vergleich zu schneller zu seinng-show/ng-hide
. Nach meiner Erfahrung ist der Unterschied vernachlässigbar. Animationen sind möglich, wenn beideng-show/ng-hide
undng-if
mit Beispielen für beide in der Angular-Dokumentation verwendet werden.Letztendlich müssen Sie die Frage beantworten, ob Sie ein Element aus dem DOM entfernen können oder nicht.
quelle
ng-if
. Überprüfen Sie den Absatz Animationen und das Beispiel in den Dokumenten . Auch mitng-hide/ng-show
den CSS-Selektoren gefällt:first-child
oder:nth-child
funktioniert es nicht richtig, da auch die versteckten Elemente gezählt werden.ng-if
schafft einen neuen Bereich , währendng-show
dies nicht tut.Sehen Sie hier für eine CodePen, die den Unterschied in wie ng-if / ng-Show arbeiten, DOM-weise demonstriert.
@markovuksanovic hat die Frage gut beantwortet. Aber ich würde es aus einer anderen Perspektive betrachten: Ich würde diese Elemente immer verwenden
ng-if
und aus DOM herausholen, es sei denn:$watch
-es für Ihre Elemente, um aktiv zu bleiben, solange sie unsichtbar sind. Formulare sind hierfür möglicherweise ein guter Fall, wenn Sie die Gültigkeit von Eingaben überprüfen möchten, die derzeit nicht sichtbar sind, um festzustellen, ob das gesamte Formular gültig ist.Angular ist wirklich gut geschrieben. Es ist schnell, wenn man bedenkt, was es tut. Aber was es tut, ist eine ganze Menge Magie, die schwierige Dinge (wie die bidirektionale Datenbindung) trivial einfach aussehen lässt. Um all diese Dinge einfach aussehen zu lassen, ist ein gewisser Leistungsaufwand erforderlich. Es könnte Sie schockieren, zu erkennen, wie oft hunderte oder tausende Male eine Setterfunktion während des
$digest
Zyklus auf einem Stück DOM ausgewertet wird , das niemand überhaupt betrachtet. Und dann merkt man, dass Dutzende oder Hunderte von unsichtbaren Elementen dasselbe tun ...Desktops sind möglicherweise leistungsstark genug, um die meisten Probleme mit der JS-Ausführungsgeschwindigkeit zu lösen. Wenn Sie jedoch für Mobilgeräte entwickeln, sollte die Verwendung von ng-if, wann immer dies menschlich möglich ist, ein Kinderspiel sein. Auf mobilen Prozessoren spielt die JS-Geschwindigkeit immer noch eine Rolle. Die Verwendung von ng-if ist ein sehr einfacher Weg, um potenziell signifikante Optimierungen zu sehr, sehr geringen Kosten zu erzielen.
quelle
ng-show
kann nützlich sein, wenn Sie beispielsweise Registerkarten mit viel Inhalt haben, dessen Rendern einige Zeit in Anspruch nimmt. Nach dem ersten Rendern erfolgt das Wechseln zwischen Registerkarten sofort, währendng-if
ein erneutes Rendern, Binden von Ereignissen usw. erforderlich ist. Der Nachteil besteht darin, dass Uhren erstellt werden, die im Hintergrund ausgeführt werden. Angular braucht dringendng-ifshowwatch
Meiner Erfahrung nach:
1) Wenn Ihre Seite einen Schalter hat, der ng-if / ng-show verwendet, um etwas anzuzeigen / auszublenden, verursacht ng-if eine größere Verzögerung des Browsers (langsamer). Beispiel: Wenn Sie eine Schaltfläche zum Umschalten zwischen zwei Ansichten haben, scheint ng-show schneller zu sein.
2) ng-if erstellt / zerstört den Bereich, wenn es als wahr / falsch ausgewertet wird. Wenn Sie einen Controller an das ng-if angeschlossen haben, wird dieser Controller-Code jedes Mal ausgeführt, wenn das ng-if den Wert true hat. Wenn Sie ng-show verwenden, wird der Controller-Code nur einmal ausgeführt. Wenn Sie also eine Schaltfläche haben, die zwischen mehreren Ansichten umschaltet, würde die Verwendung von ng-if und ng-show einen großen Unterschied beim Schreiben Ihres Controller-Codes bewirken.
quelle
Die Antwort ist nicht einfach:
Es hängt von den Zielcomputern ab (mobil oder Desktop), es hängt von der Art Ihrer Daten, dem Browser, dem Betriebssystem, der Hardware ab, auf der es ausgeführt wird ... Sie müssen ein Benchmarking durchführen, wenn Sie es wirklich wissen möchten.
Es handelt sich meistens um ein Speicher- oder Berechnungsproblem. Wie bei den meisten Leistungsproblemen kann der Unterschied bei wiederholten Elementen (n) wie Listen erheblich werden , insbesondere wenn sie verschachtelt sind (nxn oder schlechter) und auch, welche Art von Berechnungen Sie in diesen Elementen ausführen ::
ng-show : Wenn diese optionalen Elemente häufig vorhanden (dicht) sind, wie beispielsweise in 90% der Fälle, ist es möglicherweise schneller, sie bereit zu halten und nur anzuzeigen / auszublenden, insbesondere wenn ihr Inhalt billig ist (nur einfacher Text, nichts zu berechnen oder zu laden). Dies verbraucht Speicher, da es das DOM mit versteckten Elementen füllt, aber nur etwas anzuzeigen / auszublenden, was bereits vorhanden ist, ist wahrscheinlich eine billige Operation für den Browser.
ng-if : Wenn im Gegenteil Elemente wahrscheinlich nicht angezeigt werden (spärlich), erstellen Sie sie einfach und zerstören Sie sie in Echtzeit, insbesondere wenn ihr Inhalt teuer zu beschaffen ist (Berechnungen / sortiert / gefiltert, Bilder, generierte Bilder). Dies ist ideal für seltene oder On-Demand-Elemente. Es spart Speicherplatz, da das DOM nicht gefüllt wird, kann jedoch viel Rechenaufwand (Erstellen / Zerstören von Elementen) und Bandbreite (Abrufen von Remote-Inhalten) kosten. Dies hängt auch davon ab, wie viel Sie in der Ansicht berechnen (Filtern / Sortieren) und was Sie bereits im Modell haben (vorsortierte / vorgefilterte Daten).
quelle
Ein wichtiger Hinweis:
ngIf (im Gegensatz zu ngShow) erstellt normalerweise untergeordnete Bereiche, die zu unerwarteten Ergebnissen führen können.
Ich hatte ein Problem damit und ich habe VIEL Zeit damit verbracht herauszufinden, was los war.
(Meine Direktive schrieb ihre Modellwerte in den falschen Bereich.)
Um Ihre Haare zu schonen, verwenden Sie einfach ngShow, es sei denn, Sie laufen zu langsam.
Der Leistungsunterschied ist ohnehin kaum spürbar und ich bin mir noch nicht sicher, wer es ohne Test bevorzugt ...
quelle
$parent.scopevar
von Datenbindungen innerhalb eines ngIf behebt Probleme mit untergeordnetenngIf
überall Leute gesehen, die glaubten, dass dies die Leistung verbessern wird. Dies ist einfach nicht wahr und man kann nicht sagen, welches am besten ist,ngIf
oderngShow
ohne einen Test oder eine gründliche Analyse im speziellen Fall. Daher empfehle ich immer noch zu vergessenngIf
, bis man eine schlechte Leistung sieht oder weiß, was er tutng-if auf ng-include und auf ng-controller hat einen großen Einfluss auf ng-include. Es lädt nicht den erforderlichen Teil und verarbeitet nicht, es sei denn, das Flag ist wahr auf ng-controller. Es lädt den Controller nicht, es sei denn, das Flag ist true, aber das Problem ist, wenn ein Flag in ng falsch wird. Wenn es aus dem DOM entfernt wird, wenn das Flag wieder true wird, wird das DOM neu geladen. In diesem Fall ist ng-show besser, einmal zeigt ng-if besser
quelle
Wenn Sie
ng-show or ng-hide
den Inhalt verwenden (z. B. Miniaturansichten vom Server), wird dieser unabhängig vom Wert des Ausdrucks geladen, jedoch basierend auf dem Wert des Ausdrucks angezeigt.Wenn Sie
ng-if
den Inhalt verwenden, wird er nur geladen, wenn der Ausdruck des ng-if als wahr ausgewertet wird.Die Verwendung von ng-if ist eine gute Idee in einer Situation, in der Sie Daten oder Bilder vom Server laden und diese nur in Abhängigkeit von der Benutzerinteraktion anzeigen. Auf diese Weise wird das Laden Ihrer Seite nicht durch unnötige neue intensive Aufgaben blockiert.
quelle
src
Attribut desimg
Tags, wenn es vorhanden ist, wird es geladen!