escape cloak angularjs

angularjs - cloak - Evita que la notación de corsé doble se muestre momentáneamente antes de que angular.js compile/interpolate documento



ng-cloak (7)

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

¿Hay una razón común por la que esto sucedería que indicaría que estoy haciendo algo generalmente incorrecto, o existe una forma conocida de evitar esto?

Creo que estás buscando la directiva ngCloak : 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 original (sin compilar) mientras se carga la aplicación. Utilice 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 elemento <body> , pero el uso preferido es aplicar múltiples directivas ngCloak a pequeñas porciones de la página para permitir la representación progresiva de la vista del navegador

En su css agregue el siguiente

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

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

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

¡Eso es!

Estoy de acuerdo con la respuesta @ pkozlowski.opensource, pero la clase ng-clock no me funcionó por usar con ng-repeat. así que me gustaría recomendarle que use la clase para una expresión delimitadora simple como {{nombre}} 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>

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

.ng-cloak { display:none; }

Solo agrega el CSS de encubrimiento al encabezado de la página o a uno de tus 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 https://docs.angularjs.org/api/ng/directive/ngCloak acuerdo con la práctica normal de Angular, 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 de CSS anteriores al encabezado de la página.