Pourquoi lier par ng est mieux que {{}} en angulaire ?

Question

J'étais dans un de l'angle de présentation et celui de la personne à la réunion mentionnée ng-bind est mieux que {{}} de liaison.

L'une des raisons, ng-bind mettre la variable dans la liste de surveillance et seulement quand il y a un changement de modèle de données transférées à vue, d'autre part, {{}} interpole l'expression de tous les temps (je suppose que c'est l'angle de cycle) et pousser la valeur, même si la valeur a changé ou pas.

Aussi, il est dit que, si vous n'avez pas beaucoup de données sur l'écran, vous pouvez utiliser {{}} et le problème de performance ne sera pas visible. Quelqu'un peut jeter quelque lumière sur cette question, pour moi?

Answer 1

Visibilité:

Alors que votre angularjs est d'amorçage, l'utilisateur peut voir votre placées entre parenthèses dans le code html. Cela peut être manipulé avec ng-cloak. Mais pour moi, c'est une solution, que je n'ai pas besoin de l'utiliser, si j'utilise ng-bind.

---

Performance:

L' {{}} est beaucoup plus lent.

Cette ng-bind est une directive et un de ceux qui veillent sur le passé de la variable. Si l' ng-bind s'appliquera seulement, lorsque la valeur passée en fait de changement.

Les crochets sur l'autre main sera sale vérifié et actualisé dans chaque $digest, même si c'est pas nécessaire.

---

Je suis actuellement à la construction d'un grand single page app (~500 bindings per view). Changement à partir de {{}} à la stricte ng-bind ne nous sauver comme 20% chaque scope.$digest.

---

Suggestion:

Si vous utilisez un module de traduction comme angular-translate préfère toujours les directives avant de supports d'annotation.

{{'WELCOME'|translate}} => <span ng-translate="WELCOME"></span>

Si vous avez besoin d'une fonction de filtre, vaut mieux aller pour une directive, qui fait juste utilise votre filtre personnalisé. La Documentation pour la somme de service de filtre

Answer 2

Si vous n’utilisez pas `` , à la place quelque chose comme ceci :

vous pourriez voir la réelle pendant une seconde avant est résolu (avant que les données sont chargées)

Vous pourriez faire quelque chose comme ça

Si c’est un problème pour vous.

Une autre solution consiste à utiliser `` .

Answer 3

ng-bind est mieux que {{}}.

Comme ça :

Cela signifie que l’ensemble du texte "Bonjour, {{variable}}" encadré par sera copié et stocké dans la mémoire.

Si vous faites quelque chose comme ceci :

Cette volonté stockées uniquement la valeur de la variable en mémoire, angulaire enregistrera un observateur où l’expression espionne se compose de la variable seulement.

Answer 4

Fondamentalement, le double-bouclés syntaxe est naturellement plus lisible et nécessite moins de frappe.

Les deux cas donnent le même résultat, mais.. si vous choisissez d'aller avec le double-bouclé il y a une chance que l'utilisateur va voir pour quelques millisecondes les {{}} avant votre modèle rendu par angulaire. Donc, si vous remarquez un quelconque {{}} est alors préférable d'utiliser ng-bind.

Également très important, c'est que c'est seulement dans votre index.html de votre angulaire de l'application, vous pouvez avoir non-rendus {{}}. Si vous êtes en utilisant les directives alors des modèles, il n'y a aucune chance de voir que parce angulaire d'abord rendre le modèle et après l'ajouter à la DOM.

Answer 5

C’est parce qu’avec {{}} angulaire compilateur considère les deux le texte parent node et c' est comme il y a une possibilité de fusion des 2 nœuds de {{}}. Par conséquent, il y a des linkers supplémentaires qui s’ajoute le temps de chargement. Bien sûr pour un petit nombre de tels cas la différence est sans conséquence, mais lorsque vous utilisez ceci à l’intérieur d’un répéteur de grand nombre d’éléments, il provoque un impact dans l’environnement d’exécution plus lente.