Jak korzystać z dyrektywy ng-Cloak w AngularJs?

Question

Jak korzystać z dyrektywy ng-Cloak w AngularJs?

Co to jest ng-cloak dyrektywa?
Dlaczego go używamy?

28

angularjs directive

Author: Brad Larson, 2015-02-14

Source

3 answers

Powód użycia ng-cloak Ben jest ważny, jednak wynik przykładu podanego przez Bena będzie w niektórych sytuacjach nadal wyświetlał {{var}}. Jest to szczególnie prawdziwe w środowisku naturalnym, gdy skrypty są zazwyczaj ładowane asynchronicznie lub umieszczane na dole dowolnej treści html.

W przykładzie Ben ' a umieścił <style> na górze, ale go nie używa, powinniśmy umieścić klasę ng-cloak na <body>, w ten sposób i użyć tej stylizacji:

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

W ten sposób zawartość znacznik body nie zostanie wyświetlony dopóki nie zmieni się kątowo ng-cloak na display: block lub dyrektywa zaktualizuje oznaczony html.

Powodem dodania klasy jest to, że dyrektywa ng-cloak jest przetwarzana Po wyświetleniu html, więc zawsze istnieje możliwość, że Twój wątek JS umrze i nadal wyświetli coś takiego jak {{something here}}.

Dobrym przykładem właściwego użycia byłoby włączenie dyrektywy class="ng-cloak" i ng-cloak do dyrektywy ng-repeat.

Jednakże, jeśli tylko {{}} to denerwujące i poza tym strona jest w porządku, nawet gdy wątek JS się rozbił, lepiej używać ng-bind na swoich tagach, niż dodawać {{}} w nich.

11

Author: user2935435,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-12-02 09:03:01

Jedna notka, którą chciałbym dodać - Widziałem dla większości aplikacji, samo dodanie ng-cloak nie działa. To dlatego, że ta strona może być większa i js nie jest ładowany do tego czasu.

Ręczne stosowanie CSS dla tej dyrektywy pomogłoby tutaj -

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

Mam nadzieję, że to komuś pomoże!

0

Author: Abhay Dixit,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-09-08 07:02:01

score 36 · Accepted Answer

Ng-cloak

From the docs:

Dyrektywa ngCloak jest używana, aby zapobiec krótkotrwałemu wyświetlaniu szablonu html przez przeglądarkę w jej surowej (nieskompilowanej) formie podczas ładowania aplikacji. Użyj tej dyrektywy, aby uniknąć niepożądanego efektu migotania spowodowanego wyświetlaniem szablonu html.

W krótkich słowach, możesz użyć dyrektywy ng-cloak, aby zapobiec wyświetlaniu nieskompilowanych elementów. Nieskomplikowany element może być elementem, który posiada i czekać na przychodzące dane:

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

Jeśli kontroler myvar nadal nie jest skompilowany lub dane nie są wypełnione ng-cloak uniemożliwia wyświetlenie" {{myvar}} " i wyświetli div tylko podczas kompilacji zmiennej.

Wykonaj ten przykład kodu i sprawdź wyniki z i bez 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
                }); 
            });
        }); 
}]);