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

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?

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.

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.

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.

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.

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

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.

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

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 .

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.

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

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

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

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.