web-dev-qa-db-fra.com

Comment utiliser correctement la directive ng-cloak?

D'une manière ou d'une autre, ng-cloak dans AngularJS ne fonctionne pas. Je souhaite masquer {{}} lors du chargement de la page. Parce que c'est affreux.

<!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>
javascriptangularjsangularjs-directivengcloak
65
Kotaro

Ajouter ce css de ici

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

et utilisez le nom de la classe ou l'attribut sur votre div parent ou n'importe où vous avez défini votre application.

par exemple:

<div ng-app="Random" class="ng-cloak">
</div>
105
Yasser

De the Angular docs :

Pour le meilleur résultat, le angular.js script doit être chargé dans la section head du document html; sinon, la règle css ci-dessus doit être incluse dans la feuille de style externe de l'application.

31
GregL

Vous devez spécifier ces règles dans votre CSS:

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

Utiliser ngBind devrait également éliminer cela (je développe parfois dans SharePoint et ngCloak ne fonctionnera pas).

Docs AngularJS:

Il est préférable d’utiliser ngBind au lieu de {{expression}} si un modèle est momentanément affiché par le navigateur dans son état brut avant Angular le compile. Comme ngBind est un attribut d’élément, des liaisons invisibles pour l'utilisateur pendant le chargement de la page.

Une solution alternative à ce problème serait d'utiliser la directive 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>
9
kenhow

Ajoutez ci-dessous dans votre fichier css: -

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

Ma solution Je pense avoir essayé toutes les suggestions ci-dessus mais rien n'a fonctionné. Certaines utilisations ng-include, mais cela semble un peu trop, de plus cela pourrait être effrayant avec la portée interne qui est créée. Donc, il a essayé en utilisant style et style-ng. Dans mon div principal affecté.

<div class="container" style="display:hidden;" ng-style="loaded">

Ensuite, je règle la variable d’étendue chargée dans mon contrôleur de base.

$ scope.loaded = {display: 'block'};

J'ai encore tous ces {{}}. Bizarre lorsque l'affichage est défini pour bloquer uniquement lorsque angularjs a été chargé. Ensuite, j'ai remarqué que j'avais la console de développement firefox f12 en cours d'exécution. C'est du truc. Stupide que je suis

5
Jens Alenius

Dans mon cas, je pensais que mes problèmes étaient dus aux demandes en attente d'ajax. Ng-cloak fonctionne probablement pour le contenu statique, mais si un modèle dépend d'une donnée ajax, cela est donc rendu avant la réception de la réponse ajax.

Pour l'éviter, je définis une directive:

angu

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);

                }
            };
        }]);

Avec un peu de CSS:

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

Puis dans votre fichier HTML principal:

<div ui-view data-ajax-cloak></div>

Remarque: ce n'est pas aussi sophistiqué que ng-cloak car c'est un cloack global, il cache tout jusqu'à ce que toutes les demandes soient terminées.

5
Rolintocour

À partir de angular 1.3 et ultérieur, vous devez spécifier un nom pour l'attribut ng-app pour que cela fonctionne.

<html lang="en" ng-app="myApp">

Dans votre JS:

angular.module("myApp",[])

Cela fera que le angular amorcera.

Mais pour la situation actuelle, lorsque vous chargez angular au bas de la page, le chargement prend du temps. Le css requis pour le ng-cloak n'est pas encore disponible.

Déplacez le js vers la balise ou chargez le code CSS spécifique dans votre CSS pour le faire fonctionner.

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

J'ai essayé toutes les réponses ci-dessus et beaucoup au-delà, sans aide. Ma (grande) page scintillerait à chaque chargement. Ma solution était d'ajouter ceci juste après la balise body:

<div style="display:flex" opacity=0>
  <status-progress></status-progress>
  <h3>Loading... </h3>
</div>

et pour tout envelopper dans la page:

<div class="loaded" style="opacity: 0" opacity=1> ... </div>

directif:

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);
            }
        }
    }

Pour que la page apparaisse "plus lisse", la feuille de style:

.loaded{
    transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
}

De cette façon, vous voyez "Chargement" pendant 1 seconde, pendant que tout est prêt.

2
Vega

Puisqu'aucune de ces réponses ne m'a donné le résultat souhaité, j'ai réalisé ce que je voulais en créant une directive très similaire à ng-cloak mais en enveloppant le code dans un $timeout pour qu’il attende la fin du $digest cycle pour supprimer l'attribut et/ou la classe de camouflage. C’était la seule façon pour moi de vraiment cacher le {{}} liaisons dans le navigateur.

angular.directive('myCloak', function($timeout) {
  return {
    restrict: 'A',
    compile: function (element, attr) {
      $timeout(function () {
        attr.$set('myCloak', undefined);
        element.removeClass('my-cloak');
      });
    }
  };
});

Et n'oubliez pas, vous devrez ajouter une règle CSS personnalisée pour ce nouvel attribut/classe:

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

Utiliser le correctif recommandé ici fonctionne pour moi ...

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")
0
Samir Seetal

Utilisez ngBind lorsque ng-cloak n'est pas disponible.

<p ng-show="!isShow" ng-bind="isShow"></p>
0
Tushar