Как использовать фактическое использование директивы ng-Cloak в AngularJs?

  • Что такое директива ng-cloak?
  • Почему мы его используем?

Ответы

Ответ 1

нг-накидка

Из документов:

Директива ngCloak используется для предотвращения короткого отображения шаблона Angular html браузером в его исходной (не скомпилированной) форме во время загрузки вашего приложения. Используйте эту директиву, чтобы избежать нежелательного эффекта мерцания, вызванного отображением шаблона html.

Вкратце, вы можете использовать директиву ng-cloak для предотвращения отображения некомпилированных элементов. Некомпилированный элемент может быть элементом, который удерживает и ждет входящих данных:

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

если myvar-контроллер еще не скомпилирован или данные не заполнены, ng-cloak предотвращает отображение "{myvar}}" и отображает только div при компиляции переменной.

Следуйте этому примеру кода и проверьте результаты с помощью и без 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
                }); 
            });
        }); 
}]);

Ответ 2

Приведенная причина использования ng-cloak Ben действительна, однако в результате примера, представленного Беном, в некоторых ситуациях все еще отображается {{var}}. Это особенно верно в дикой природе, когда скрипты обычно загружаются асинхронно или помещаются в нижней части любого html-объекта.

В примере с Беном он положил <style> сверху, но не использует его, мы должны поместить класс ng-cloak на <body>, например, и использовать этот стиль:

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

Таким образом, содержимое тега body не будет показываться до тех пор, пока Angular не изменит ng-cloak на display: block или директива обновит тегированный html.

Причина добавления класса заключается в том, что директива ng-cloak анализируется после отображения html, поэтому всегда существует вероятность, что ваш поток JS будет умирать и все еще отображает что-либо вроде {{something here}}.

Хорошим примером правильного использования было бы включение директивы class="ng-cloak" и ng-cloak в директиву ng-repeat.

Однако, если его просто {{}} это раздражает, а в противном случае страница отлично, даже когда поток JS разбился, лучше использовать ng-bind для ваших тегов, а не добавлять {{}} внутри них.

Ответ 3

Одна заметка, которую я хотел бы добавить - Я видел большую часть приложения, просто добавление ng-cloak не работает. Это потому, что эта страница может быть больше и js не загружается до этого времени.

Применять вручную CSS для этой директивы поможет здесь -

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

Надеюсь, что это поможет кому-то!