Ich hatte das gleiche Problem in zwei verschiedenen eckigen Anwendungen, an denen ich gearbeitet habe, und doch konnte ich keine Diskussion über dieses Problem finden - was mich denken lässt, dass ich etwas vermisse. Nehmen wir an, ich habe eine Sicht auf eine "Aufgabe", die in einer Reihe von verschiedenen Zuständen sein kann, einschließlich "ausstehend", "akzeptiert" und "abgeschlossen". Abhängig vom Status der Aufgabe werden verschiedene Aktionsknöpfe angezeigt, zum Beispiel:
%Vor%Das Problem ist, dass, wenn der Benutzer auf die Schaltfläche "Akzeptieren" klickt, für einen kurzen Zeitraum die beiden folgenden Schaltflächen angezeigt werden. Es ist so, als würde angular sequentiell durch das DOM arbeiten und für den kurzen Zeitraum zwischen ng-ifs werden sowohl der 'Flag' als auch der 'vollständig' Button angezeigt, da nur einer aktualisiert wurde. Dies tritt auch bei ng-show auf.
Hinweis: Dies ist kein Problem, das mit ng-cover gelöst werden kann, da es nur dazu dient, zu verhindern, dass eine Vorlage angezeigt wird, bevor eckig ihre Zauberkraft entfaltet hat.
Gegeben ich habe dieses Problem in beiden der beiden großen Winkelanwendungen, an denen ich gearbeitet habe, aufgetreten, muss es ein häufiges Problem sein. Irgendwelche Vorschläge, wie dies typischerweise gelöst wird? (PS, das obige HTML ist nur ein Beispiel dafür, was ich meine, es ist nicht meine eigentliche Vorlage.)
Das liegt daran, dass ngIf das Element im DOM vollständig entfernt und neu erstellt. Wenn ein Element mithilfe von ngIf entfernt wird, wird sein Bereich zerstört und ein neuer Bereich wird erstellt, wenn das Element wiederhergestellt wird. Der in ngIf erstellte Bereich erbt von seinem übergeordneten Bereich mithilfe der prototypischen Vererbung. Außerdem erstellt ngIf Elemente mithilfe ihres kompilierten Status neu.
Wenn in der Tat ngIf zu false ausgewertet wird, wird das Element entfernt. Aber nur wenn es unmittelbar danach nicht auf True gesetzt wird, aktualisiert eckig nur das DOM (Ihren HTML), wenn es dazu Gelegenheit hat, d. H. Nach dem aktuellen synchronen Codeblock.
Das folgende Code-Snippet hat keine Auswirkungen:
%Vor%Das wird
%Vor%Bitte beachten Sie, dass es aufgrund Ihrer eckigen App aufgrund von schweren DOM-Inhalten zu vielen Wächtern kommen kann. Ich habe einen einfachen Plünderer erstellt, um Ihr Szenario zu replizieren, aber nicht davor. Sie können Watcher überprüfen und reduzieren, indem Sie das verfügbare Chrome-Plugin und / oder viele andere Wege hinzufügen, wie dies . Googeln Sie es einfach und Sie können einen Schatz von vielen fruchtbaren Informationen finden, um die Anzahl der Nutzer Ihrer App zu verbessern.
Ok, jetzt hab ich es genau was du hier brauchst :) Schau !! Das ist was uns eckige Dokumente gesagt haben "Beachten Sie besonders den leistungsstarken ng-switch , der verwendet werden sollte anstelle von mehreren sich gegenseitig ausschließenden ng-Shows. " Eines der gut lesen Sie auf "Wann zu verwenden, was !!!". Ich hoffe also, dass flackernde Schaltflächen nicht passieren werden, wenn Sie den ng-Schalter bei diesen Instanzen verwenden oder alternativ das Gerüst einer Lösung erreichen, die ziemlich generisch ist und ohne Berücksichtigung des aktuellen Gültigkeitsbereichs funktioniert, indem die Direktiveninitialisierungsfunktion für die Kommunikation zwischen Instanzen verwendet wird . Siehe dies , in dem ich die Klasse auf mehrere Schaltflächen in gegenseitig ausschließender Weise angewendet habe.
Die nachstehenden ng-if-Anweisungen stellen sicher, dass jeweils eins angezeigt wird. Wenn Sie es beide gleichzeitig sehen, sollte es daran liegen, dass etwas in Ihrem Code mit dem eckigen Digest-Zyklus rumhängt, der die bidirektionale Bindung der Felder und das Rendern der Schaltflächen verzögert.
%Vor%Tags und Links javascript angularjs angularjs-scope