wake-up-neo.com

Wie verwende ich die tatsächliche Verwendung der ng-Cloak-Direktive in AngularJs?

  1. Was ist die ng-cloak-Direktive?
  2. Warum benutzen wir es? 
29
Anil Singh

ng-Mantel

Aus den Dokumenten:

Die ngCloak-Direktive wird verwendet, um zu verhindern, dass die Angular-HTML-Vorlage vom Browser kurz in ihrer rohen (nicht kompilierten) Form angezeigt wird, während Ihre Anwendung geladen wird. Verwenden Sie diese Anweisung, um das unerwünschte Flimmern zu vermeiden, das durch die Anzeige der HTML-Vorlage verursacht wird.

Kurz gesagt, Sie können die Direktive ng-cloak verwenden, um zu verhindern, dass nicht kompilierte Elemente angezeigt werden. Ein nicht kompiliertes Element kann ein Element sein, das eingehende Daten enthält und darauf wartet:

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

wenn der Myvar-Controller immer noch nicht kompiliert ist oder die Daten nicht gefüllt sind, verhindert ng-cloak die Anzeige von "{{myvar}}" und zeigt nur das div an, wenn die Variable kompiliert wird.

Folgen Sie diesem Codebeispiel und überprüfen Sie die Ergebnisse mit und ohne 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

Der Grund für die Verwendung von ng-cloak Ben ist gültig. In einigen Fällen wird jedoch das Ergebnis des von Ben bereitgestellten Beispiels immer noch den {{var}} anzeigen. Dies trifft insbesondere auf die Wildnis zu, wenn Skripts im Allgemeinen asynchron geladen werden oder am Ende eines jeden HTML-Körpers platziert werden.

In Bens Beispiel hat er einen <style> an die Spitze gesetzt, verwendet ihn aber nicht. Wir sollten die Klasse ng-cloak auf den <body> setzen und diesen Stil verwenden:

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

Auf diese Weise wird der Inhalt des body-Tags nicht angezeigt, bis Angular ng-cloak in display: block ändert, oder die Direktive die getaggte HTML-Datei aktualisiert.

Der Grund für das Hinzufügen der Klasse liegt darin, dass die Anweisung ng-cloak analysiert wird after die HTML-Datei wurde angezeigt. Daher besteht immer die Möglichkeit, dass Ihr JS-Thread stirbt und weiterhin etwas wie {{something here}} anzeigt.

Ein gutes Beispiel für die richtige Verwendung wäre, die class="ng-cloak"- und ng-cloak-Direktive in eine ng-repeat-Direktive aufzunehmen.

Wenn jedoch nur {{}} das nervt und ansonsten die Seite in Ordnung ist, selbst wenn der JS-Thread abgestürzt ist, ist es besser, ng-bind für Ihre Tags zu verwenden, anstatt {{}} hinzuzufügen.

11
user2935435

Eine Anmerkung, die ich gerne hinzufügen möchte, ist - Ich habe für die meisten Anwendungen gesehen, das Hinzufügen von ng-cloak funktioniert nicht. Das liegt daran, dass diese Seite möglicherweise größer ist und js bis zu diesem Zeitpunkt nicht geladen wird. 

Die manuelle Anwendung von CSS für diese Direktive würde hier helfen -  

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

Hoffe das würde jemandem helfen!

0
Abhay Dixit