Ich war in einer der eckigen Präsentationen und eine der Personen in der genannten Besprechung ng-bind
ist besser als {{}}
bindend.
Einer der Gründe, ng-bind
die Variable in die Beobachtungsliste aufzunehmen und nur bei einem Modellwechsel die Daten zur Ansicht zu verschieben, {{}}
interpoliert den Ausdruck jedes Mal (ich denke, es ist der Winkelzyklus) und drückt die Wert, auch wenn sich der Wert geändert hat oder nicht.
Es wird auch gesagt, dass, wenn Sie nicht viele Daten auf dem Bildschirm haben, Sie verwenden können {{}}
und das Leistungsproblem nicht sichtbar ist. Kann mir jemand etwas Licht in dieses Thema bringen?
javascript
angularjs
ng-bind
Nair
quelle
quelle
ngBind
anstatt sie{{ expression }}
vorübergehend vom Browser in ihrem Rohzustand anzuzeigen, bevor Angular sie kompiliert. DangBind
es sich um ein Elementattribut handelt, werden die Bindungen für den Benutzer während des Ladens der Seite unsichtbar." - aber nichts wird über die Leistung erwähnt.Antworten:
Wenn Sie nicht verwenden
ng-bind
, verwenden Sie stattdessen Folgendes:Möglicherweise sehen Sie den tatsächlichen Wert
Hello, {{user.name}}
für eine Sekunde, bevor eruser.name
aufgelöst wird (bevor die Daten geladen werden).Sie könnten so etwas tun
wenn das ein Problem für Sie ist.
Eine andere Lösung ist zu verwenden
ng-cloak
.quelle
ng-cloak
wurde erfunden, um dieses Problem zu beheben.ng-bind-template
wo Sie beide Ansätze kombinieren können:ng-bind-template="Hello, {{user.name}}"
Hier bietet die Bindung noch den Leistungsschub und führt keine weitere Verschachtelung einSichtweite:
Während Ihr AngularJS bootstrappt, sieht der Benutzer möglicherweise Ihre platzierten Klammern im HTML. Dies kann mit behandelt werden
ng-cloak
. Aber für mich ist dies eine Problemumgehung, die ich nicht verwenden muss, wenn ich sie verwendeng-bind
.Performance:
Das
{{}}
ist viel langsamer .Dies
ng-bind
ist eine Direktive und setzt einen Watcher auf die übergebene Variable. Das gilt alsong-bind
nur, wenn sich der übergebene Wert tatsächlich ändert .Die Klammern hingegen werden in jedem Fall schmutzig geprüft und aktualisiert , auch wenn dies nicht erforderlich ist .
$digest
Ich baue gerade eine große App für eine einzelne Seite (~ 500 Bindungen pro Ansicht). Der Wechsel von {{}} zu streng
ng-bind
hat uns jeweils etwa 20% erspartscope.$digest
.Vorschlag :
Wenn Sie ein Übersetzungsmodul wie Angular-Translate verwenden , bevorzugen Sie immer Direktiven vor der Annotation in Klammern.
{{'WELCOME'|translate}}
=><span ng-translate="WELCOME"></span>
Wenn Sie eine Filterfunktion benötigen, wählen Sie besser eine Direktive, die nur Ihren benutzerdefinierten Filter verwendet. Dokumentation für $ filter service
UPDATE 28.11.2014 (aber vielleicht nicht zum Thema):
In Angular 1.3x wurde die
bindonce
Funktionalität eingeführt. Daher können Sie den Wert eines Ausdrucks / Attributs einmal binden (wird gebunden, wenn! = 'Undefiniert').Dies ist nützlich, wenn Sie nicht erwarten, dass sich Ihre Bindung ändert.
Verwendung: Platz
::
vor Ihrer Bindung:Beispiel:
ng-repeat
um einige Daten in der Tabelle mit mehreren Bindungen pro Zeile auszugeben. Übersetzungsbindungen, Filterausgaben, die in jedem Scope Digest ausgeführt werden.quelle
ng-bind
ist besser als{{...}}
Zum Beispiel könnten Sie Folgendes tun:
Dies bedeutet, dass der gesamte
Hello, {{variable}}
eingeschlossene Text<div>
kopiert und im Speicher gespeichert wird.Wenn Sie stattdessen so etwas tun:
Nur der Wert des Werts wird im Speicher gespeichert, und Angular registriert einen Watcher (Watch-Ausdruck), der nur aus der Variablen besteht.
quelle
<div ng-bind-template="{{ var1 }}, {{ var2}}"></div>
ist eine Alternative zu {{}} und funktioniert wie ng-bindng-bind
wäre vergleichbarer mit<div>Hello, <span>{{variable}}</span></div>
.Grundsätzlich ist die doppelt geschweifte Syntax natürlicher lesbar und erfordert weniger Eingabe.
Beide Fälle erzeugen die gleiche Ausgabe, aber wenn Sie sich dafür entscheiden,
{{}}
besteht die Möglichkeit, dass der Benutzer einige Millisekunden{{}}
lang sieht, bevor Ihre Vorlage durch Winkel gerendert wird. Wenn Sie also etwas bemerken,{{}}
ist es besser, es zu verwendenng-bind
.Sehr wichtig ist auch, dass Sie nur in Ihrer index.html Ihrer eckigen App nicht gerendert haben können
{{}}
. Wenn Sie Direktiven für Vorlagen verwenden, besteht keine Möglichkeit, dies zu erkennen, da Angular die Vorlage zuerst rendert und anschließend an das DOM anfügt.quelle
{{...}}
ist bidirektionale Datenbindung gemeint. Aber ng-bind ist eigentlich gemeint , für unidirektionale Datenbindung.Durch die Verwendung von ng-bind wird die Anzahl der Beobachter auf Ihrer Seite verringert. Daher ist ng-bind schneller als
{{...}}
. Wenn Sie also nur einen Wert und seine Aktualisierungen anzeigen und seine Änderung von der Benutzeroberfläche zurück zum Controller nicht widerspiegeln möchten, wählen Sie ng-bind . Dies erhöht die Seitenleistung und verringert die Ladezeit der Seite.quelle
Dies liegt daran, dass
{{}}
der Winkelcompiler sowohl den Textknoten als auch dessen übergeordneten Knoten berücksichtigt, da die Möglichkeit besteht, zwei{{}}
Knoten zusammenzuführen. Daher gibt es zusätzliche Linker, die die Ladezeit verlängern. Natürlich ist der Unterschied für einige dieser Fälle unerheblich. Wenn Sie ihn jedoch in einem Repeater mit einer großen Anzahl von Elementen verwenden, wirkt sich dies in einer Umgebung mit langsamerer Laufzeit aus.quelle
Der Grund, warum Ng-Bind besser ist, weil,
Wenn Ihre Seite nicht geladen ist oder wenn Ihr Internet langsam ist oder wenn Ihre Website zur Hälfte geladen ist, können Sie sehen, dass diese Art von Problemen (Überprüfen Sie den Screenshot mit der Lesemarke ) auf dem Bildschirm ausgelöst werden, was völlig seltsam ist. Um dies zu vermeiden, sollten wir Ng-bind verwenden
quelle
ng-bind hat seine Probleme too.When Sie versuchen Winkel verwenden Filter , Limit oder etwas anderes, vielleicht können Sie Problem haben , wenn Sie verwenden ng-bind . In anderen Fällen ist ng-bind auf der UX- Seite besser. Wenn der Benutzer eine Seite öffnet, sieht er (10 ms-100 ms), dass Symbole ( {{...}} ) gedruckt werden. Deshalb ist ng-bind besser .
quelle
Es gibt ein flackerndes Problem in {{}}, wie wenn Sie die Seite aktualisieren, dann wird für einen kurzen Zeitraum Spam-Ausdruck angezeigt. Daher sollten wir ng-bind anstelle von Ausdruck für die Datendarstellung verwenden.
quelle
ng-bind
ist auch sicherer, weil eshtml
als Zeichenfolge darstellt.So
'<script on*=maliciousCode()></script>'
wird beispielsweise als String angezeigt und nicht ausgeführt.quelle
Laut Angular Doc:
Da ngBind ein Elementattribut ist, werden die Bindungen für den Benutzer unsichtbar, während die Seite geladen wird. Dies ist der Hauptunterschied.
Grundsätzlich können wir keine dom- Elemente sehen, bis sie nicht geladen sind. Da ngBind ein Attribut für das Element ist, wartet es, bis die Doms ins Spiel kommen ... weitere Informationen unten
ngBind
- Direktive im Modul ng
Das Attribut ngBind teilt AngularJS mit an, den Textinhalt des angegebenen HTML-Elements durch den Wert eines bestimmten Ausdrucks zu ersetzen und den Textinhalt zu aktualisieren, wenn sich der Wert dieses Ausdrucks ändert.
Normalerweise verwenden Sie ngBind nicht direkt , sondern verwenden das doppelt geschweifte Markup wie {{expression}}, das ähnlich, aber weniger ausführlich ist.
Es ist vorzuziehen, ngBind anstelle von {{expression}} zu verwenden, wenn eine Vorlage vom Browser vorübergehend in ihrem Rohzustand angezeigt wird, bevor AngularJS sie kompiliert. Da ngBind ein Elementattribut ist, werden die Bindungen für den Benutzer unsichtbar, während die Seite geladen wird.
Eine alternative Lösung für dieses Problem wäre die Verwendung der ngCloak- Direktive. Besuche hier
Weitere Informationen zum ngbind finden Sie auf dieser Seite: https://docs.angularjs.org/api/ng/directive/ngBind
Sie könnten so etwas als Attribut tun, ng-bind :
oder Interpolation wie folgt durchführen:
oder auf diese Weise mit ng-cloak-Attributen in AngularJs:
ng-Umhang vermeiden, auf dem Dom zu blinken und warten, bis alle bereit sind! Dies entspricht dem Attribut ng-bind ...
quelle
Sie können auf diese Seite verweisen, sie gibt Ihnen eine Erklärung, welche besser ist, da ich weiß, dass {{}} dies langsamer ist als ng-bind.
http://corpus.hubwiz.com/2/angularjs/16125872.html verweisen auf diese Site.
quelle