not - ¿Cómo usar el uso real de la directiva ng-Cloak en AngularJs?
ng-hide (3)
ng-manto
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.
En pocas palabras, puede usar la directiva ng-cloak para evitar que se muestren elementos no compilados. Un elemento no compilado puede ser un elemento que retiene y espera los datos entrantes:
<div ng-cloak>{{myvar}}</div>
si el controlador myvar aún no está compilado o los datos no están completos, ng-cloak evita que se muestre "{{myvar}}" y solo mostrará el div cuando se compile la variable.
Siga este ejemplo de código y verifique los results con y sin ng-cloak:
<style>
[ng/:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x- ng-cloak {
display: none !important;
}
</style>
<body ng-controller="MyController" ng-cloak>
<h3>ngCloak Example</h3>
<ol >
<li ng-repeat="item in myData">
{{item.title}}
</li>
</ol>
</body>
var myApp= angular.module("myApp",[''ngResource'']);
myApp.controller("MyController", ["$scope", "$resource","$timeout",
function($scope,$resource,$timeout){
$scope.myData =[];
var youtubeVideoService = $resource("https://gdata.youtube.com/feeds/api/videos?q=googledevelopers&max-results=5&v=2&alt=jsonc&orderby=published");
youtubeVideoService.get()
.$promise.then(function(responseData) {
angular.forEach(responseData.data.items,
function(aSingleRow){
console.log(aSingleRow);
$scope.myData.push({
"title":aSingleRow.title
});
});
});
}]);
- ¿Qué es la directiva
ng-cloak? - ¿Por qué lo usamos?
La razón dada para usar ng-cloak Ben es válida, sin embargo, el resultado del ejemplo proporcionado por Ben en algunas situaciones aún mostrará el {{var}} . Esto es particularmente cierto en el mundo salvaje cuando los scripts generalmente se cargan de forma asíncrona o se colocan en la parte inferior de cualquier cuerpo html.
En el ejemplo de Ben, él pone un <style> en la parte superior, pero no lo usa, deberíamos colocar la clase ng-cloak en el <body> , así, y usar ese estilo:
<body class="ng-cloak" ng-controller="MyController" ng-cloak> ...
De esta manera, el contenido de la etiqueta del cuerpo no se mostrará hasta que Angular cambie ng-cloak para display: block o la directiva actualiza el html etiquetado.
La razón para agregar la clase es porque la directiva ng-cloak se analiza después de que se muestra el html, por lo que siempre existe la posibilidad de que su hilo JS muera y aún muestre algo como {{something here}} .
Un buen ejemplo de uso adecuado sería incluir la directiva class="ng-cloak" y ng-cloak en una directiva ng-repeat .
Sin embargo, si solo es {{}} eso es molesto y, de lo contrario, la página está bien incluso cuando el subproceso JS se ha bloqueado, es mejor usar ng-bind en sus etiquetas en lugar de agregar {{}} dentro de ellas.
Una nota que me gustaría agregar: la he visto para la mayor parte de la aplicación, solo agregar que ng-cloak no funciona. Es porque esa página puede ser más grande y js no se está cargando hasta ese momento.
La aplicación manual de CSS para esta directiva ayudaría aquí.
[ng-cloak]
{
display: none !important;
}
Espero que esto ayude a alguien!