Angular Lazy One-Time-Bindung für Ausdrücke

93

AngularJS hat seit der Version 1.3.0-beta.10 eine neue Funktion: die "faule einmalige Bindung" .

Einfachen Ausdrücken kann ein Präfix vorangestellt werden ::, das Angular anweist, die Beobachtung zu beenden, nachdem der Ausdruck zum ersten Mal ausgewertet wurde. Das übliche Beispiel ist so etwas wie:

<div>{{::user.name}}</div>

Gibt es eine ähnliche Syntax für Ausdrücke wie die folgenden?

<div ng-if="user.isSomething && user.isSomethingElse"></div>
<div ng-class="{classNameFoo: user.isSomething}"></div>
javascript angularjs binding lazy-evaluation selten
quelle
Eine ausführliche Erklärung finden Sie in den eckigen Dokumenten: docs.angularjs.org/guide/expression#one-time-binding
Akshay Gundewar,

Antworten:

160

Ja. Sie können jedem Ausdruck einen Präfix voranstellen ::, auch den in ngIfoder ngClass:

<div ng-if="::(user.isSomething && user.isSomethingElse)"></div>
<div ng-class="::{classNameFoo: user.isSomething}"></div>

Tatsächlich überprüft der Code einfach, ob die beiden ersten Zeichen im Ausdruck vorhanden sind :, um die einmalige Bindung zu aktivieren (und entfernt sie dann, sodass die Klammern nicht einmal benötigt werden). Alles andere bleibt gleich.

Schwarzes Loch
quelle
3
Es beantwortet meine Frage, obwohl einige der neuen Funktionen nicht gut funktionieren: <div ng-if="::user.isSomething"></div>und <div ng-if="::(!user.isSomething)"></div>beide rendern. Es funktioniert ohne das "::".
Seldary
@seldary Ich kann das Problem nicht reproduzieren. Alle mit vorangestellten Ausdrücke ::funktionieren gut für mich, wie in meiner Bearbeitung erläutert. Können Sie im Zweifelsfall eine Geige spielen?
Blackhole
7
Zuerst schien es auch bei mir nicht zu funktionieren, da bei ngClass mehrere Klassen definiert waren. Ich fand schnell heraus, dass die Bindung immer noch gebunden war, da einige der in ngClass verwendeten überwachten Variablen noch nicht definiert waren (und wir wissen, dass Angular darauf wartet, dass der Wert zuerst definiert wird, bevor der Watcher freigegeben wird). Hier ist eine kleine Geige, um dieses Verhalten zu demonstrieren: jsfiddle.net/2LkyLoop .
Denis Pshenov
1
Die @ maxRocket-Bindonce-Syntax wurde in Winkel 1.3 hinzugefügt. Also wird es in 1.2 oder niedriger nicht funktionieren
Berty
2
Die einmalige Bindung von ng-if scheint nicht zu funktionieren. Die Anzahl der Beobachter ist mit oder ohne sehr hoch ::. Es funktioniert gut für die ng-Klasse, aber ng-if scheint für mich nicht der einmaligen Bindung zu gehorchen (1.5.6). Beachten Sie, dass ich versuche, eine Objekteigenschaft, die aus einer ng-Wiederholung stammt, in eine Richtung zu binden. Ich bin mir nicht sicher, ob das einen Unterschied macht.
AgmLauncher