web-dev-qa-db-fra.com

Comment utiliser l'utilisation réelle de la directive ng-Cloak dans AngularJs?

  1. Quelle est la directive ng-cloak?
  2. Pourquoi l'utilisons-nous? 
angularjsdirective
29
Anil Singh

ng-Cape

De la docs:

La directive ngCloak est utilisée pour empêcher le navigateur d’afficher brièvement le modèle HTML angulaire sous sa forme brute (non compilée) pendant le chargement de votre application. Utilisez cette directive pour éviter l’effet de scintillement indésirable causé par l’affichage du modèle html.

En quelques mots, vous pouvez utiliser la directive ng-cloak pour empêcher l’affichage des éléments non compilés. L'élément non compilé peut être un élément qui contient et attend les données entrantes:

<div ng-cloak>{{myvar}}</div>

si le contrôleur myvar n'est toujours pas compilé ou si les données ne sont pas renseignées, ng-cloak empêche l'affichage de "{{myvar}}" et affichera uniquement le div lorsque la variable est compilée.

Suivez cet exemple de code et vérifiez dans résultats avec et sans 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
                }); 
            });
        }); 
}]);
40
Ben Diamant

La raison donnée pour l'utilisation de ng-cloak Ben est valide. Toutefois, dans certains cas, le résultat de l'exemple fourni par Ben affichera toujours le {{var}}. Cela est particulièrement vrai dans la nature lorsque les scripts sont généralement chargés de manière asynchrone ou placés au bas de tout corps HTML.

Dans l'exemple de Ben, il a placé un <style> en haut mais ne l'utilise pas, nous devrions placer la classe ng-cloak sur le <body>, comme suit, et utiliser ce style:

<body class="ng-cloak" ng-controller="MyController" ng-cloak> ...

De cette façon, le contenu de la balise body ne sera pas affiché jusqu'à ce que Angular change ng-cloak en display: block ou que la directive mette à jour le code HTML étiqueté.

La raison de l'ajout de la classe est que la directive ng-cloak est analysée après le code HTML a été affiché. Il est donc toujours possible que votre thread JS meurt et qu'il affiche encore un élément comme {{something here}}.

Un bon exemple d'utilisation appropriée consisterait à inclure les directives class="ng-cloak" et ng-cloak dans une directive ng-repeat.

Cependant, si son {{}} ennuyeux, sinon la page va bien même si le thread JS s'est écrasé, il est préférable d'utiliser ng-bind sur vos balises plutôt que d'y ajouter {{}}.

11
user2935435

Une note que je voudrais ajouter - J'ai vu pour la plupart des applications, ajouter simplement le ng-cloak ne fonctionne pas. C'est parce que cette page est peut-être plus grande et que js n'est pas chargé jusqu'à ce moment-là. 

L'application manuelle de CSS pour cette directive aiderait ici -  

[ng-cloak]  
{  
display: none !important;
}

J'espère que cela aiderait quelqu'un!

0
Abhay Dixit