Evite que la notación de llaves dobles se muestre momentáneamente antes de que angular.js compile / interpole el documento

298

Parece ser principalmente un problema en IE cuando hay una cantidad de imágenes / scripts para cargar, puede haber una buena cantidad de tiempo {{stringExpression}}en el que se muestra el literal en el marcado, luego desaparece una vez que se hace angular con su compilación / interpolación de el documento.

¿Hay alguna razón común por la que esto sucedería que indique que estoy haciendo algo generalmente mal, o hay una forma conocida de prevenir esto?

angularjs JeremyWeir
fuente
66
Esto podría ayudar: branchandbound.net/blog/web/2013/08/some-angularjs-pitfalls
Ismael
Lo anterior fue la solución correcta
Edmund Rojas el

Respuestas:

283

Creo que está buscando la ngCloakdirectiva: https://docs.angularjs.org/api/ng/directive/ngCloak

De la documentación:

La directiva ngCloak se usa para evitar que el navegador muestre brevemente la plantilla html angular en su forma sin procesar (sin compilar) mientras se carga la aplicación. Use esta directiva para evitar el efecto de parpadeo no deseado causado por la visualización de la plantilla html.

La directiva se puede aplicar al <body>elemento, pero el uso preferido es aplicar múltiples ngCloak directivas a pequeñas porciones de la página para permitir la representación progresiva de la vista del navegador

pkozlowski.opensource
fuente
1
Para evitar el código HTML angular en bruto, ¿es ngCloakuna práctica generalizada / mejor práctica? Parece obvio, pero no tengo experiencia en AngularJS.
Kevin Meredith
32
No creo que esto funcione si carga todos los scripts al final del cuerpo.
trusktr
8
Aaah, espera, nvm, la respuesta de LOAS es la solución si cargas los scripts en último lugar. Usa la clase .ng-cloak.
trusktr
3
Cargue el script angularjs en la <head>sección de su html para ngCloakque sea efectivo.
Mustafa
1
Puedo confirmar que funciona perfectamente si cargo angular.jsen la <head>sección de mi página.
Aron Lorincz
197

Además, puede usar en <span ng-bind="hello"></span>lugar de {{hello}}.

http://jsfiddle.net/4LhN9/34/

Andrew Joslin
fuente
94
Una característica sobre ng-bind que a veces se pasa por alto es que puede especificar el texto para mostrar mientras Angular se está cargando: <span ng-bind = "myScopeProperty"> cargando ... </span>. Aparecerá "cargando ...", luego se reemplazará una vez que se haya definido myScopeProperty.
Mark Rajcok el
@ MarkRajcok: ¡gracias por el consejo! No tenía ni idea. Eso es muy simple y elegante y resuelve un problema que yo mismo he tenido.
Jim Raden el
99
Si necesita varias expresiones, use ngBindTemplate. Por ejemplo, <span ng-bind-template = "{{scopeProperty1}} {{scopeProperty2}}"> cargando ... </span>
Mark Rajcok
27
También puedes hacer {{hola || 'loading ...'}}
Andrew Joslin
55
@AndyJoslin Nice. Con este enfoque, la secuencia de comandos angular js debe estar en la cabeza, a diferencia de la parte inferior de la página, para evitar que la expresión {{}} parpadee cuando se carga la página.
s_t_e_v_e
51

Para mejorar la efectividad del enfoque class = 'ng-cloak' cuando los scripts se cargan en último lugar, asegúrese de que el siguiente css esté cargado en el encabezado del documento:

.ng-cloak { display:none; }
LOAS
fuente
44
Agregar! Importante no es mala idea también.
eomeroff
12
¿No visibility: hiddensería mejor?
mpen
2
@eomeroff, pero !importantes un hack CSS (algo malo) para promover un estilo para ser seleccionado, ¿verdad? Rompe las reglas del selector CSS.
Kevin Meredith
55
En mi humilde opinión este es uno de los casos! Importante fue introducido para.
lex82
3
@Mark Supongo que "visibilidad: oculta" aún representaría el espacio necesario para el marcado de la plantilla, mientras que "display: none" no representa nada en absoluto. Con solo la visibilidad oculta, cualquier elemento externo puede colapsar repentinamente al tamaño interno real, en lugar de crecer a tamaño de la nada. Supongo que es lo que uno prefiera. :)
James Wilkins
40

Simplemente agregue el CSS de ocultamiento al encabezado de la página o a uno de sus archivos CSS:

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak, .ng-hide {
    display: none !important;
}

Luego puede usar la directiva ngCloak de acuerdo con la práctica angular normal, y funcionará incluso antes de que se cargue Angular.

Esto es exactamente lo que hace Angular: el código al final de angular.js agrega las reglas CSS anteriores al encabezado de la página.

Bennett McElwee
fuente
+1 Se me ocurrió el [ngcloak]selector yo mismo, pero esto es más completo.
Pierre Henry
1
Respuesta impresionante! Cargo Angular al final de mi cuerpo, por lo que ngCloak no está disponible y todavía muestra el {{}}. Esto lo solucionó.
Scottie
21

En su CSS agregue lo siguiente

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
 }

Y luego, en su código, puede agregar la directiva ng-cloak. Por ejemplo,

<div ng-cloak>
   Welcome {{data.name}}
</div>

¡Eso es!

Nathan Senevirathne
fuente
3

Estoy de acuerdo con la respuesta @ pkozlowski.opensource, pero la clase ng-clock no me funcionó para usar con ng-repeat. así que me gustaría recomendarle que use la clase para una expresión delimitadora simple como {{name}} y la directiva ngCloak para ng-repeat.

<div class="ng-cloak">{{name}}<div>

y 

<li ng-repeat="item in items" ng-cloak>{{item.name}}<li>
Jaison
fuente
Gracias por notarme el error
Jaison