AngularJS: ¿Por qué ng-bind es mejor que {{}} en angular?

Visibilidad:

Mientras su angularjs está bootstrapping, el usuario puede ver sus corchetes colocados en el html. Esto se puede manejar con ng-cloak. Pero para mí esta es una solución alternativa, que no necesito usar, si uso ng-bind.

Rendimiento:

El {{}} es mucho más lento.

Esta ng-bind es una directiva y colocará un observador en la variable pasada. Así que el ng-bind solo se aplicará, cuando el pasado el valor realmente cambia .

Los soportes en El otro lado será sucio comprobado y renovado en cada $digest, incluso si no es necesario.

Actualmente estoy construyendo una gran aplicación de una sola página (~500 enlaces por vista). Cambiar de {{}} a ng-bind estricto nos ahorró aproximadamente un 20% en cada scope.$digest.

Sugerencia:

Si utiliza un módulo de traducción como angular-translate , siempre prefiera directivas antes de la anotación entre corchetes.

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

Si necesita una función de filtro, es mejor ir por una directiva, que en realidad solo utiliza su filtro personalizado. Documentación para filter filter service

ACTUALIZACIÓN 28.11.2014 (pero tal vez fuera del tema):

En Angular 1.3 x se introdujo la funcionalidad bindonce. Por lo tanto, puede enlazar el valor de una expresión/atributo una vez (se enlazará cuando != 'undefined').

Esto es útil cuando no esperas que tu enlace cambie.

Uso: Coloque :: antes de su encuadernación:

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

Ejemplo:

ng-repeat para generar algunos datos en la tabla, con múltiples enlaces por fila. Traducción-enlaces, salidas de filtro, que se ejecutan en cada resumen de ámbito.

ng-bind es mejor que {{...}}

Por ejemplo, podrías hacer:

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

Esto significa que todo el texto Hello, {{variable}} encerrado por <div> será copiado y almacenado en memoria.

Si en cambio haces algo como esto:

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

Solo el valor del valor se almacenará en la memoria, y angular registrará un vigilante (expresión de vigilancia) que consiste solo en la variable.

Básicamente, la sintaxis de doble rizado es más legible naturalmente y requiere menos escritura.

Ambos casos producen la misma salida pero.. si elige ir con {{}} existe la posibilidad de que el usuario vea durante algunos milisegundos el {{}} antes de que su plantilla sea renderizada por angular. Así que si notas cualquier {{}} entonces es mejor usar ng-bind.

También es muy importante que solo en su índice.html de su aplicación angular puede tener un-renderizado {{}}. Si está utilizando directivas, luego plantillas, no hay posibilidad de ver eso porque angular primero renderiza la plantilla y después la anexa al DOM.

Esto se debe a que con {{}} el compilador angular considera tanto el nodo de texto como su padre, ya que existe la posibilidad de fusionar 2 nodos {{}}. Por lo tanto, hay enlazadores adicionales que se suman al tiempo de carga. Por supuesto, para algunas de estas ocurrencias, la diferencia es irrelevante, sin embargo, cuando se utiliza esto dentro de un repetidor de gran número de elementos, causará un impacto en un entorno de tiempo de ejecución más lento.

{{...}} se refiere al enlace de datos bidireccional. Pero, ng-bind está realmente destinado para el enlace de datos unidireccional.

Usar ng-bind reducirá el número de observadores en tu página. Por lo tanto ng-bind será más rápido que {{...}}. Por lo tanto, si solo desea mostrar un valor y sus actualizaciones, y no desea reflejar su cambio de interfaz de usuario al controlador, entonces vaya a ng-bind. Esto aumentará el rendimiento de la página y reducirá el tiempo de carga de la página.

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

La razón por la que Ng-Bind es mejor porque,

Cuando su página no se Carga o cuando su Internet es lento o cuando su sitio web se carga la mitad, entonces puede ver este tipo de problemas (Verifique la captura de pantalla con la marca de lectura) se activarán en la pantalla que está completamente cableada. Para evitar tal debemos Ng-bind

Ng-bind también tiene sus problemas.Cuando intenta usar filtros angulares , limit u otra cosa, tal vez pueda tener problemas si usa ng-bind. Pero en otros casos, ng-bind es mejor en UX lado.cuando el usuario abre una página, verá (10ms-100ms) que imprimen símbolos ({{ ... }} ), es por eso que ng-bind es mejor.

Hay algún problema de parpadeo en {{}} como cuando se actualiza la página, entonces para un corto spam de expresión de tiempo es seen.So deberíamos usar ng-bind en lugar de expression para la representación de datos.

ng-bind también es más seguro porque representa html como una cadena.

Así, por ejemplo, '<script on*=maliciousCode()></script>' se mostrará como una cadena y no se ejecutará.

Según Angular Doc:
Dado que ngBind es un atributo de elemento, hace que los enlaces sean invisibles para el usuario mientras se carga la página... es la principal diferencia...

Básicamente hasta que cada dom elementos no cargados, no podemos verlos y porque ngBind es atributo en el elemento, espera hasta que los dom entren en juego... más información a continuación

NgBind
- directiva en el módulo ng

El El atributo ngBindindica a AngularJS que reemplace el contenido de texto del elemento HTML especificado con el valor de una expresión dada, y que actualice el contenido de texto cuando cambie el valor de esa expresión.

Normalmente, no se usa ngBind directamente, sino que se usa el marcado rizado doble como {{expresión }} que es similar pero menos detallado.

Es preferible usar ngBind en lugar de {{expression }} si una plantilla es momentáneamente mostrado por el navegador en su estado raw antes de que AngularJS lo compile. Dado que ngBind es un atributo de elemento, hace que los enlaces sean invisibles para el usuario mientras se carga la página.

Una solución alternativa para este problema sería usar la directiva ngCloak. visita aquí

Para más información sobre el ngbind visite esta página: https://docs.angularjs.org/api/ng/directive/ngBind

Usted podría hacer algo como esto como atributo, ng-bind :

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

O haga la interpolación como abajo:

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

O de esta manera con los atributos ng-cloak en AngularJS:

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

Ng-cloak evite parpadear en el dom y espere hasta que todos estén listos! esto es igual al atributo ng-bind...

Puede referirse a este sitio que le dará una explicación cuál es mejor, ya que sé {{}} esto es más lento que ng-bind.

Http://corpus.hubwiz.com/2/angularjs/16125872.html consulte este sitio.