Wie kann ich in AngularJS einen Wert ohne bidirektionale Datenbindung rendern? Möglicherweise möchten Sie dies aus Leistungsgründen tun oder sogar einen Wert zu einem bestimmten Zeitpunkt rendern.
In den folgenden Beispielen wird die Datenbindung verwendet:
<div>{{value}}</div>
<div data-ng-bind="value"></div>
Wie rendere ich value
ohne Datenbindung?
javascript
angularjs
data-binding
Blowsie
quelle
quelle
ng-model
bietet Ihnen bidirektionale Datenbindung: Modelländerungen -> Aktualisierungen anzeigen, Änderungen anzeigen -> Modellaktualisierungen.Antworten:
Winkel 1,3+
In 1.3 hat Angular dies mithilfe der folgenden Syntax unterstützt.
Wie in dieser Antwort erwähnt .
Winkel 1.2 und darunter
Dies ist einfach und benötigt kein Plugin. Überprüfen Sie dies heraus.
Diese kleine Richtlinie wird leicht das erreichen, was Sie erreichen wollen
Sie können einmal so binden
Sie können wie gewohnt binden
Demo: http://jsfiddle.net/fffnb/
Einige von Ihnen verwenden möglicherweise eckigen Batarang, und wie in den Kommentaren erwähnt, wird das Element, wenn Sie diese Direktive verwenden, immer noch als verbindlich angezeigt, wenn dies nicht der Fall ist. Ich bin mir ziemlich sicher, dass dies etwas mit den Klassen zu tun hat, die an das Element angehängt sind Versuchen Sie dies, es sollte funktionieren (nicht getestet) . Lassen Sie mich in den Kommentaren wissen, ob es für Sie funktioniert hat.
@ x0b : Wenn Sie eine Zwangsstörung haben und das leere
class
Attribut entfernen möchten, tun Sie diesquelle
Es sieht so aus, als ob Angular 1.3 (beginnend mit Beta 10) eine einmalige Bindung eingebaut hat:
https://docs.angularjs.org/guide/expression#one-time-binding
quelle
Verwenden Sie das Bindonce-Modul . Sie müssen die JS-Datei einschließen und als Abhängigkeit zu Ihrem App-Modul hinzufügen:
Mit dieser Bibliothek können Sie Elemente rendern, die nur einmal gebunden sind - wenn sie zum ersten Mal initialisiert werden. Alle weiteren Aktualisierungen dieser Werte werden ignoriert. Dies ist eine großartige Möglichkeit, die Anzahl der Uhren auf der Seite für Dinge zu reduzieren, die sich nach dem Rendern nicht ändern.
Anwendungsbeispiel:
Bei einer solchen Verwendung wird die Eigenschaft unter
value
festgelegt, sobald sie verfügbar ist. Anschließend wird die Uhr deaktiviert.quelle
$resource
.Vergleich zwischen @OverZealous und @Connor Antworten:
Mit dem traditionellen ngRepeat von Angular: 15s für 2000 Zeilen und 420mo RAM ( Plunker )
Mit ngRepeat und dem Modul von @OverZealous: 7s für 2000 Zeilen und 240Mo RAM ( Plunker )
Mit ngRepeat und der Direktive von @Connor: 8s für 2000 Zeilen und 500Mo RAM ( Plunker )
Ich habe meine Tests mit Google Chrome 32 durchgeführt.
quelle
angular-once
verglichen zu haben . Vielen Dank.angular-once
Paket beizufügen (ich habe es hier als alternative Option veröffentlicht).Als Alternative gibt es
angular-once
Paket:angular-once
wurde tatsächlich inspiriertbindonce
und bietet ähnlicheonce-*
Attribute:quelle