javascript - not - ¿Cómo usar correctamente la directiva ng-cloak?
ng-cloak angular 4 (12)
De alguna manera, ng-cloak en AngularJS no funciona. Quiero ocultar {{}} al cargar la página. Porque se ve horrible.
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>Angular Sample</title>
</head>
<body ng-model="isShow" ng-init="isShow=true">
<p ng-show="isShow"><span ng-cloak>{{ isShow }}</span></p>
<p ng-show="!isShow"><span ng-cloak>{{ isShow }}</span></p>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</body>
</html>
Agregue a continuación en su archivo CSS: -
[ng/:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
Agregue este CSS desde here
[ng/:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
y use el nombre de la clase o el atributo en su div principal o en cualquier lugar donde haya definido su aplicación.
p.ej:
<div ng-app="Random" class="ng-cloak">
</div>
Como ninguna de estas respuestas me dio el resultado deseado, logré lo que quería al crear una directiva muy similar a
ng-cloak
pero envolviendo el código en un
$timeout
para que espere hasta el final del ciclo de
$digest
para eliminar el atributo de ocultamiento y / o clase.
Esta fue la única forma en que pude ocultar realmente los enlaces
{{}}
en el navegador.
angular.directive(''myCloak'', function($timeout) {
return {
restrict: ''A'',
compile: function (element, attr) {
$timeout(function () {
attr.$set(''myCloak'', undefined);
element.removeClass(''my-cloak'');
});
}
};
});
Y no lo olvide, tendrá que agregar una regla CSS personalizada para este nuevo atributo / clase:
[my/:cloak], [my-cloak], [data-my-cloak], [x-my-cloak], .my-cloak, .x-my-cloak {
display: none !important;
}
De here :
Para obtener el mejor resultado, el script
angular.jsdebe cargarse en la sección de cabecera del documento html; alternativamente, la regla css anterior debe incluirse en la hoja de estilo externa de la aplicación.
Debe especificar estas reglas en su CSS:
[ng/:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
Desde angular 1.3 en adelante, debe especificar un nombre para el atributo ng-app para que funcione.
<html lang="en" ng-app="myApp">
EN tu JS:
angular.module("myApp",[])
Esto hará que sea angular a bootstrap.
Pero para la situación actual, ya que está cargando angular en la parte inferior de la página, está tardando en cargar.
Por lo tanto, el CSS requerido para el
ng-cloak
aún no está disponible.
Mueva el
js
a la etiqueta o cargue el código CSS específico en su CSS para que funcione.
[ng/:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
El uso de ngBind también debería eliminar eso (a veces desarrollo en SharePoint y ngCloak no funcionará).
Documentos de AngularJS:
Es preferible usar ngBind en lugar de {{expresión}} si el navegador muestra momentáneamente una plantilla en su estado bruto antes de que Angular la compile. Como ngBind es un atributo de elemento, hace que los enlaces sean invisibles para el usuario mientras se carga la página.
Una solución alternativa a este problema sería usar la directiva ngCloak.
JS:
var app = angular.module(''test'', []);
app.controller(''testCtrl'', [''$scope'', function($scope) {
$scope.test = "Hello World";
}]);
HTML:
<html ng-app="test">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="testCtrl">
<h1 ng-bind="test"></h1>
</body>
</html>
En mi caso, pensé que mis problemas se debían a solicitudes pendientes de ajax. Ng-cloak probablemente funciona para contenido estático, pero si una plantilla depende de los datos de ajax, esto se procesa antes de recibir la respuesta de ajax.
Para evitarlo, defino una directiva:
angu
<div class="container" style="display:hidden;" ng-style="loaded">
Con un poco de CSS:
$scope.loaded ={display:''block''};
Luego, en su archivo HTML principal:
mymodule
.directive("ajaxCloak", [''$interval'', ''$http'', function ($interval, $http) {
return {
restrict: ''A'',
link: function (scope, element, attrs) {
let stop = $interval(() => {
if ($http.pendingRequests.length === 0) {
$interval.cancel(stop);
attrs.$set("ajaxCloak", undefined);
element.removeClass("ajax-cloak");
}
}, 100);
}
};
}]);
Nota: esto no es tan sofisticado como ng-cloak, ya que es un cloack global, oculta todo hasta que se completen todas las solicitudes.
He intentado todas las respuestas anteriores y mucho más, sin ayuda. Mi página (grande) parpadearía en cada carga. Mi solución fue agregar esto justo después de la etiqueta del cuerpo:
<div style="display:flex" opacity=0>
<status-progress></status-progress>
<h3>Loading... </h3>
</div>
y para envolver todo en la página:
<div class="loaded" style="opacity: 0" opacity=1> ... </div>
directiva:
app.directive(''opacity'', opacity);
function opacity($timeout) {
return {
link: function (scope, element, attrs) {
var value = attrs.opacity;
$timeout(function () {
element[0].style.opacity = value;
},500);
}
}
}
Para hacer que la página parezca "más suave", la hoja de estilo:
.loaded{
transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
}
De esta manera, verá "Cargando" durante 1 segundo, mientras todo se está preparando.
Mi solución Creo que probé todas las sugerencias anteriores pero nada funcionó. Algunos usan ng-include pero parece un poco demasiado, además podría dar miedo con el alcance interno que se crea. Entonces lo probó usando style y ng-style. En mi div principal afectado.
[ajax-cloak], [data-ajax-cloak], [x-ajax-cloak], .ajax-cloak {
display: none !important;
}
Luego configuro la variable de alcance cargada en mi controlador base.
<div ui-view data-ajax-cloak></div>
Todavía tengo todos esos {{}}. Extraño cuando la pantalla se configura para bloquear solo cuando angularjs se ha cargado. Luego noté que tenía la consola de desarrollador firefox f12 ejecutándose . Está haciendo cosas. Estúpido yo
Usar la solución recomendada aquí funciona para mí ...
https://github.com/opitzconsulting/jquery-mobile-angular-adapter/issues/167
CSS:
.my-cloak {
display: none !important;
}
JS:
$scope.$on(''$viewContentLoaded'', function(){
$(''.my-cloak'').removeClass(''my-cloak'');
});
HTML:
div(class="my-cloak")
Use ngBind cuando ng-cloak no esté disponible.
<p ng-show="!isShow" ng-bind="isShow"></p>