javascript - entre - ng-bind-html angularjs

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

Question

Estuve en una de las presentaciones angulares y una de las personas en la reunión mencionada ng-bind es mejor que la vinculación {{}} .

Una de las razones es que ng-bind pone la variable en la lista de observación y solo cuando hay un cambio de modelo, los datos son empujados a ver, por otra parte, {{}} interpolará la expresión cada vez (supongo que es el ciclo angular) y presione el valor, incluso si el valor cambió o no.

También se dice que, si no tiene mucha información en la pantalla, puede usar {{}} y el problema de rendimiento no será visible. ¿Alguien puede arrojar algo de luz sobre este tema para mí?

Answer 1

Básicamente, la sintaxis de doble curvatura es más legible de forma natural y requiere menos escritura.

Ambos casos producen el mismo resultado, pero ... si elige ir con {{}} existe la posibilidad de que el usuario vea durante algunos milisegundos el {{}} antes de que la plantilla se muestre en forma angular. Por lo tanto, si observa alguno {{}} , es mejor usar ng-bind .

También es muy importante que solo en tu index.html de tu aplicación angular puedes tener {{}} sin procesar. Si está utilizando directivas, entonces las plantillas, no hay posibilidad de verlo porque angular primero procesa la plantilla y luego la agrega al DOM.

Answer 2

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 aumentan el tiempo de carga. Por supuesto, para algunas de estas situaciones, la diferencia es irrelevante, sin embargo, cuando se utiliza dentro de un repetidor de gran cantidad de elementos, causará un impacto en un entorno de tiempo de ejecución más lento.

Answer 3

Existe un problema de parpadeo en {{}}, como cuando actualiza la página y luego se ve un breve spam de expresión de tiempo. Por lo tanto, debemos usar ng-bind en lugar de expresión para la descripción de los datos.

Answer 4

Puede referirse a este sitio; le dará una explicación de 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.

Answer 5

Si no está utilizando ng-bind , en lugar de esto:

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

es posible que vea el Hello, {{user.name}} real Hello, {{user.name}} por un segundo antes de que se resuelva user.name (antes de que se carguen los datos)

Podrías hacer algo como esto

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

Si eso es un problema para ti.

Otra solución es usar ng-cloak .

Answer 6

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

Cuando su página no está cargada o cuando su Internet está lento o cuando su sitio web está cargado a la mitad, puede ver que este tipo de problemas (verifique la captura de pantalla con marca de lectura) se activará en la pantalla que está completamente conectada. Para evitar tales deberíamos aglutinar

Answer 7

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> se copiará y almacenará en la 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 observador (expresión de observación) que consiste solo en la variable.

Answer 8

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

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

Answer 9

{{...}} significa enlace de datos bidireccional. Pero, ng-bind en realidad está destinado a un enlace de datos unidireccional.

El uso de ng-bind reducirá el número de observadores en su 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 UI al controlador, 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>

Answer 10

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

Básicamente, hasta que no se carguen todos los elementos de dom , no podemos verlos y, como ngBind es un atributo en el elemento, espera hasta que los doms entren en juego ... más información a continuación

ngBind
- Directiva en el módulo ng.

El atributo ngBind le dice 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 el valor de esa expresión cambie.

Por lo general, no usa ngBind directamente , sino que utiliza el marcado doble rizado como {{expresión}} que es similar pero menos detallado.

Es preferible usar ngBind en lugar de {{expresión}} si el navegador muestra momentáneamente una plantilla en su estado original antes de que AngularJS la compile. Dado que ngBind es un atributo de elemento, hace que los enlaces no sean visibles para el usuario mientras la página se está cargando.

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

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

Podrías hacer algo como esto como atributo, ng-bind :

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

o hacer la interpolación de la siguiente manera:

<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-manto evite parpadear en el dom y espere hasta que todos estén listos! esto es igual al atributo ng-bind ...

Answer 11

Visibilidad:

Mientras que su angularjs es 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, que no necesito usar, si uso ng-bind .

Actuación:

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

Este ng-bind es una directiva y colocará un observador en la variable pasada. Por lo tanto, el ng-bind solo se aplicará cuando el valor pasado realmente cambie .

Por otro lado, los corchetes se verán sucios y se actualizarán en cada $digest , incluso si no es necesario .

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

Sugerencia :

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

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

Si necesita una función de filtro, mejor vaya para una directiva, que en realidad solo usa su filtro personalizado. Documentación para el servicio $ filter.

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

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

Esto es útil cuando no espera que su enlace cambie.

Uso: Lugar :: 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 varios enlaces por fila. Enlaces de traducción, salidas de filtro, que se ejecutan en cada compendio de alcance.

Answer 12

ng-bind también tiene sus problemas. Cuando intentas usar filtros angulares, límite o alguna otra cosa, quizás puedas tener un problema si usas ng-bind . Pero en otro caso, ng-bind es mejor en el lado UX. Cuando el usuario abre una página, verá (10ms-100ms) que los símbolos impresos ( {{...}} ), por eso es que ng-bind es mejor .