AngularJS: Warum ist ng-bind im Winkel besser als {{}}?

401

Ich war in einer der eckigen Präsentationen und eine der Personen in der genannten Besprechung ng-bindist besser als {{}}bindend.

Einer der Gründe, ng-binddie 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?

Nair
quelle
3
Könnten Sie bitte überprüfen, ob meine Antwort die bessere ist
Konstantin Krass
{{}} ist meiner Meinung nach nicht praktikabel, der Betrachter wird Ihr Tag sehen, bevor die Daten vollständig geladen sind. Ich frage mich, ob das Angular-Team dieses Problem jemals beheben wird.
Jerry Liang
2
@Blazemonger: Können Sie nicht einfach das Attribut ng-cloak einfügen, um zu verhindern, dass Vorlagen vorübergehend angezeigt werden?
Supershnee

Antworten:

322

Wenn Sie nicht verwenden ng-bind, verwenden Sie stattdessen Folgendes:

<div>
  Hello, {{user.name}}
</div>

Möglicherweise sehen Sie den tatsächlichen Wert Hello, {{user.name}}für eine Sekunde, bevor er user.nameaufgelöst wird (bevor die Daten geladen werden).

Sie könnten so etwas tun

<div>
  Hello, <span ng-bind="user.name"></span>
</div>

wenn das ein Problem für Sie ist.

Eine andere Lösung ist zu verwenden ng-cloak.

holographisches Prinzip
quelle
3
Basierend auf dem, was Sie sagen, gibt es keinen Leistungseinbruch, wenn wir {{}} verwenden? Mir wurde gesagt, wenn Sie jedes Mal {{}} verwenden, wird dies inerpoliert und generiert das Ergebnis, selbst wenn sich das Modell nicht ändert.
Nair
4
Und wie verwende ich ng-bind, wenn ich user.name nicht in das span-Tag einschließen möchte? Wenn ich geschweifte Klammern verwende, bekomme ich einen sauberen Namen ohne HTML-Tags
Victor
5
@ KevinMeredith sieht es so aus, wenn der HTML-Code geladen wurde, der Winkel jedoch (noch) nicht. Denken Sie daran, dass es sich um clientseitige Vorlagen handelt. Die gesamte Interpolation muss im Browser erfolgen, in dem die App geladen wird. Normalerweise sind Winkellasten schnell genug, damit sie nicht wahrgenommen werden, aber in einigen Fällen wird es zu einem Problem. Also ng-cloakwurde erfunden, um dieses Problem zu beheben.
Holographisches Prinzip
17
Für mich ist dies nicht die Antwort auf die Frage, warum ngBind besser ist. Es ist nur so, wie man ngBind anstelle der {{}} Annotation und eines Verweises auf ngCloak verwendet.
Konstantin Krass
4
@ Victor gibt es auch, ng-bind-templatewo 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 ein
loother
543

Sichtweite:

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 verwende ng-bind.


Performance:

Das {{}}ist viel langsamer .

Dies ng-bindist eine Direktive und setzt einen Watcher auf die übergebene Variable. Das gilt also ng-bindnur, 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-bindhat uns jeweils etwa 20% erspart scope.$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 bindonceFunktionalitä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:

<ul>  
  <li ng-repeat="item in ::items">{{item}}</li>
</ul>  
<a-directive name="::item">
<span data-ng-bind="::value"></span>

Beispiel:

ng-repeatum einige Daten in der Tabelle mit mehreren Bindungen pro Zeile auszugeben. Übersetzungsbindungen, Filterausgaben, die in jedem Scope Digest ausgeführt werden.

Konstantin Krass
quelle
32
Dies ist eine bessere Antwort
NimChimpsky
13
Nach dem, was ich aus der Quelle (Stand: 24.11.2014) ersehen kann, wird die Curly-Interpolation wie eine Direktive behandelt (siehe addTextInterpolateDirective () in ng / compile.js). Es wird auch $ watch verwendet, damit das DOM nicht berührt wird, wenn sich der Text nicht ändert. Es wird nicht bei jedem $ Digest "schmutzig überprüft und aktualisiert", wie Sie behaupten. Bei jedem $ Digest wird jedoch die interpolierte Ergebniszeichenfolge berechnet. Es wird dem Textknoten nur zugewiesen, wenn er sich ändert.
Matti Virkkunen
6
Ich habe einen Leistungstest für die interne Bewertung geschrieben. Es hatte 2000 Einträge in einer ng-Wiederholung und zeigte 2 Attribute im Objekt an, also 2000x2-Bindungen. Die Bindungen unterscheiden sich in: Die erste Bindung war nur die Bindung in einer Spanne. Die Sekunden hatten eine Bindung und etwas einfaches HTML. Das Ergebnis: ng-bind war schneller ca. 20% pro Anwendungsbereich. Ohne den Code zu überprüfen, scheint es, dass zusätzliches einfaches HTML mit einem geschweiften Ausdruck in einem HTML-Element noch mehr Zeit benötigt.
Konstantin Krass
2
Ich möchte nur darauf hinweisen, dass gemäß den Tests hier: jsperf.com/angular-bind-vs-brackets zu zeigen scheinen, dass Klammern SCHNELLER sind als binden. (Hinweis: Balken sind Operationen pro Sekunde, daher ist länger besser). Und wie frühere Kommentare zeigen, sind ihre Beobachtungsmechanismen letztendlich identisch.
Warren
1
Da Sie keine Quelle angeben, gebe ich Ihnen eine: ng-perf.com/2014/10/30/… "ng-bind ist schneller, weil es einfacher ist. Die Interpolation muss zusätzliche Schritte zur Überprüfung des Kontexts und zur Verifizierung von ausführen Werte und mehr. das macht es etwas langsamer. "
Konstantin Krass
29

ng-bind ist besser als {{...}}

Zum Beispiel könnten Sie Folgendes tun:

<div>
  Hello, {{variable}}
</div>

Dies bedeutet, dass der gesamte Hello, {{variable}}eingeschlossene Text <div>kopiert und im Speicher gespeichert wird.

Wenn Sie stattdessen so etwas tun:

<div>
  Hello, <span ng-bind="variable"></span>
</div>

Nur der Wert des Werts wird im Speicher gespeichert, und Angular registriert einen Watcher (Watch-Ausdruck), der nur aus der Variablen besteht.

J brian
quelle
7
Auf der anderen Seite ist Ihr DOM tiefer. Je nachdem, was Sie tun, kann dies in großen Dokumenten die Renderleistung beeinträchtigen.
Stephband
2
Ja, ich denke genauso wie @stephband. Wenn Sie beispielsweise nur Name und Nachname anzeigen möchten. Warum nicht einfach interpolieren? Es funktioniert genauso, weil es die gleichen Uhren in einem Digest ausführt. Wie: <div> {{Vorname}} {{Nachname}} </ div> == <div> <span ng-bind = "Vorname"> </ span> <span ng-bind = "Nachname"> </ span> </ div> .. Und der erste sieht besser aus. Ich denke, es hängt sehr davon ab, was Sie wollen, aber am Ende haben beide Vor- und Nachteile.
Pgarciacamou
3
<div ng-bind-template="{{ var1 }}, {{ var2}}"></div>ist eine Alternative zu {{}} und funktioniert wie ng-bind
nordamerikanischer
1
Dies ist nicht Äpfel für Äpfel - Sie führen ein Span-Element in das eine ein und nicht in das andere. Das Beispiel mit ng-bindwäre vergleichbarer mit <div>Hello, <span>{{variable}}</span></div>.
Bilderstürmer
15

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 verwenden ng-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.

Hellopath
quelle
5
Interessanterweise ist es nicht dasselbe. Ich erhalte keine Ausgabe für ng-bind = "anArrayViaFactory" vs {{anArrayViaFactory}}. Ich bin auf dieses Problem gestoßen, als ich versucht habe, eine json-Antwort in einem jekyll-Protoype auszugeben, aber aufgrund eines Konflikts mit ähnlichen Vorlagen {{}} musste ich ng-bind verwenden. Eine ng-Bindung innerhalb eines ng-repeat-Blocks (Element in anArrayViaFactory) gibt Werte aus.
Eddywashere
5

{{...}}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.

<div>
  Hello, <span ng-bind="variable"></span>
</div>
Tessy Thomas
quelle
4

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.

Ambika Sukla
quelle
2

Geben Sie hier die Bildbeschreibung ein

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

Vikas Kalapur
quelle
1

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 .

Hazarapet Tunanyan
quelle
1

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.

GAURAV ROY
quelle
0

ng-bindist auch sicherer, weil es htmlals Zeichenfolge darstellt.

So '<script on*=maliciousCode()></script>'wird beispielsweise als String angezeigt und nicht ausgeführt.

Raneshu
quelle
0

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 :

<div ng-bind="my.name"></div>

oder Interpolation wie folgt durchführen:

<div>{{my.name}}</div>

oder auf diese Weise mit ng-cloak-Attributen in AngularJs:

<div id="my-name" ng-cloak>{{my.name}}</div>

ng-Umhang vermeiden, auf dem Dom zu blinken und warten, bis alle bereit sind! Dies entspricht dem Attribut ng-bind ...

Alireza
quelle
0

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.

Sneha
quelle