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

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 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: cargando ... . 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, cargando ...

— 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

6

También puede usar en ng-attr-src="{{variable}}"lugar de src="{{variable}}"y el atributo solo se generará una vez que el compilador compiló las plantillas. Esto se menciona aquí en la documentación: https://docs.angularjs.org/guide/directive#-ngattr-attribute-bindings

— Martin Schüller
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