Wie verwende ich die ng-cloak-Direktive richtig?

Question 1

Irgendwie funktioniert ng-cloak in AngularJS nicht. Ich möchte {{ }} beim Laden der Seite ausblenden. Weil es schrecklich aussieht.

<!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>

Question 2

Fügen Sie dieses CSS hinzu hier

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

und verwenden Sie entweder den Klassennamen oder das Attribut in Ihrem übergeordneten div oder an einer anderen Stelle, an der Sie Ihre App definiert haben.

z.B:

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

Question 3

Aus die Angular-Dokumentation:

Für das beste Ergebnis ist die angular.js Skript muss im Head-Bereich des HTML-Dokuments geladen werden; Alternativ muss die obige CSS-Regel in das externe Stylesheet der Anwendung eingefügt werden.

Question 4

Diese Regeln müssen Sie in Ihrem CSS angeben:

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

Question 5

Die Verwendung von ngBind sollte das ebenfalls beseitigen (ich entwickle manchmal in SharePoint und ngCloak funktioniert nicht).

AngularJS-Dokumentation:

Es ist vorzuziehen, ngBind anstelle von {{ expression }} zu verwenden, wenn ein Template vorübergehend vom Browser im Rohzustand angezeigt wird, bevor Angular es kompiliert. Da ngBind ein Elementattribut ist, macht es die Bindungen für den Benutzer unsichtbar, während die Seite geladen wird.

Eine alternative Lösung für dieses Problem wäre die Verwendung der ngCloak-Direktive.

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>

Question 6

Fügen Sie unten in Ihre CSS-Datei ein: –

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

Question 7

In meinem Fall dachte ich, dass meine Probleme auf ausstehende Ajax-Anfragen zurückzuführen waren. Ng-cloak funktioniert wahrscheinlich für statische Inhalte, aber wenn eine Vorlage von Ajax-Daten abhängt, werden diese daher gerendert, bevor die Ajax-Antwort empfangen wird.

Um dies zu vermeiden, definiere ich eine Direktive:

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

                }
            };
        }]);

Mit ein bisschen CSS:

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

Dann in Ihrer Haupt-HTML-Datei:

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

Hinweis: Dies ist nicht so ausgefeilt wie ng-cloak, da dies ein globaler Cloack ist, er verbirgt alles, bis alle Anfragen abgeschlossen sind.

Question 8

Meine Lösung Ich glaube, ich habe alle oben genannten Vorschläge ausprobiert, aber nichts hat funktioniert. Einige verwenden ng-include, aber es scheint ein bisschen zu viel zu sein, außerdem könnte es mit dem inneren Bereich, der erstellt wird, beängstigend sein. Also versuchte man es mit style und ng-style. In meiner betroffenen Haupt-Div.

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

Dann setze ich die in meinem Basiscontroller geladene Bereichsvariable.

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

Ich habe immer noch all diese {{ }}. Seltsam, wenn die Anzeige nur blockiert wird, wenn anglejs geladen wurde. Dann bemerkte ich, dass ich die Firefox f12-Entwicklerkonsole am Laufen hatte. Es macht Sachen. Ich Idiot