Как правильно использовать директиву ng-cloak?

Как-то, ng-плащ в AngularJS не работает. Я хочу скрыть {{}} при загрузке страницы. Потому что это выглядит ужасно.Как правильно использовать директиву ng-cloak?

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

источник

2015-03-30 Kotaro

Вы не указали ng-app a имя – mohamedrias

Как это даже разобрать выражения? Это другое место, где ng-init используется неправильно; директива ng-init не является инициализатором общего назначения, несмотря на его имя. – Claies

, как @ AR7 сказал, вам нужно положить некоторые css к нему работает. Я не рекомендую поместить angular.js в головную часть. –

Добавить ниже в файле CSS: -

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

источник

2015-03-30 06:00:27 squiroid

ОП не назначил никакого имени директиве 'ng-app' и с использованием углового 1.3+. Надеюсь, что это мешает ему работать – mohamedrias

@mohamedrias может быть возможным, но он не использует ng-контроллер или что-либо, связанное с модулями, поэтому я думаю, что это не создаст проблемы в этом конкретном случае :) – squiroid

Oh ya, gotcha ... – mohamedrias

От the Angular docs:

Для лучшего результата, то angular.js сценарий должен быть загружен в головной части HTML документа ; в качестве альтернативы, правило css выше должно быть включено во внешнюю таблицу стилей приложения.

источник

2015-03-30 06:00:35 GregL

Начиная с углового 1.3, вы должны указать имя для атрибута ng-app для его работы.

<html lang="en" ng-app="myApp">

В ваших JS:

angular.module("myApp",[])

Это сделает угловой для начальной загрузки.

Но для текущей ситуации, когда вы загружаете угловую в нижней части страницы, требуется время для загрузки. Так что css, необходимый для ng-cloak, пока недоступен.

Либо переместите js в тег, либо загрузите определенный CSS-код в свой CSS, чтобы он работал.

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

источник

2015-03-30 06:00:42 mohamedrias

Вы должны указать эти правила в вашем CSS:

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

источник

2015-03-30 06:00:44 m0meni

101

Добавить CSS от here

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

и использовать либо имя класса или атрибут вашего родительского DIV или где-нибудь вы определили свое приложение.

например:

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

источник

2015-03-30 06:23:25 Yasser

Я бы хотел, чтобы все ответы на SO были такими: – devdropper87

Работает отлично, но не могли бы вы рассказать о этих css? что именно он делает? – Cemre

@Cemre Он добавляет свойство display: none' ко всем вариантам класса и директивы ng-cloak. Этот класс будет активен во время загрузки вашего приложения, поэтому этот css гарантирует, что элементы с этим классом не будут отображаться. – Hartger

Мое решение Я думаю, что я попытался все выше предложения, но ничего не получалось. Некоторые используют ng-include, но это кажется немного большим, в дальнейшем это может быть страшно с создаваемой внутренней областью. Поэтому он попытался использовать стиль и стиль ng. В моем затронутом главном div.

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

Затем я установил переменную сферы, загруженную в базовый контроллер.

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

Все еще есть все {{}}. Странно, когда наборы дисплеев блокируются только при загрузке angularjs. Тогда я заметил, что у меня была консоль разработчика firefox f12, работающая. Он делает вещи. Stupid me

источник

2015-08-13 07:31:00

Использование ngBind также должно устранить это (я иногда разрабатываю SharePoint, а ngCloak работать не будет).

AngularJS Документы:

предпочтительнее использовать ngBind вместо {{выражение}}, если шаблон кратковременно отображается в браузере в сыром состоянии, прежде чем Угловое компилирует его. Поскольку ngBind является атрибутом элемента, он делает привязки невидимыми для пользователя во время загрузки страницы.

Альтернативное решение этой проблемы будет использовать директива ngCloak .

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>

источник

2015-09-23 21:07:29 kenhow

Это метод, который я использовал, когда ng-cloak был недоступен по какой-либо причине. – CGutz

Использование исправления рекомендованную здесь работает для меня ...

https://github.com/opitzconsulting/jquery-mobile-angular-adapter/issues/167

CSS:

.my-cloak { 
    display: none !important; 
}

JS:

$scope.$on('$viewContentLoaded', function(){ 
    $('.my-cloak').removeClass('my-cloak'); 
});

HTML:

div(class="my-cloak")

источник

2016-01-14 23:14:31

Я попытался все ответы выше, и многое за его пределами, без помощи. Моя (большая) страница будет мерцать при каждой загрузке. Мое решение было добавить это только после того, как тело тега:

<div style="display:flex" opacity=0> 
    <status-progress></status-progress> 
    <h3>Loading... </h3> 
</div>

и завернуть все на странице:

<div class="loaded" style="opacity: 0" opacity=1> ... </div>

директива:

app.directive('opacity', opacity); 
    function opacity($timeout) { 
     return { 
      link: function (scope, element, attrs) { 
       var value = attrs.opacity; 
       $timeout(function() { 
        element[0].style.opacity = value; 
       },500); 
      } 
     } 
    }

Чтобы сделать страницу появляются «ровнее ", таблица стилей:

.loaded{ 
    transition: opacity 1s ease-in-out; 
    -webkit-transition: opacity 1s ease-in-out; 
    -moz-transition: opacity 1s ease-in-out; 
}

Таким образом, вы видите «Загрузка» в течение 1 секунды, пока все готовится.

источник

2016-06-16 14:13:22 Vega

В моем случае я решил, что мои проблемы были сбором в ожидании аякс-запросов. Ng-cloak, вероятно, работает для статического контента, но если шаблон зависит от данных ajax, тогда это делается таким образом перед получением ответа ajax.

Чтобы избежать этого я определить директиву:

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

       } 
      }; 
     }]);

С немного CSS:

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

Затем в главном HTML файле:

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

Примечание: это не так, как софи как ng-cloak, поскольку это глобальное cloack, оно скрывает все, пока все запросы не будут завершены.

источник

2016-07-25 09:48:44 Rolintocour

Поскольку ни один из этих ответов не дал мне желаемого результата, я сделал то, что я хотел, создав директиву, очень похожую на ng-cloak но оборачивать код в $timeout так, что он будет ждать до конца $digest цикла, чтобы удалить атрибут клоакинга и/или класс. Это был единственный способ, которым я смог по-настоящему скрыть привязки {{}} в браузере.

angular.directive('myCloak', function($timeout) { 
    return { 
    restrict: 'A', 
    compile: function (element, attr) { 
     $timeout(function() { 
     attr.$set('myCloak', undefined); 
     element.removeClass('my-cloak'); 
     }); 
    } 
    }; 
});

И не забывайте, что вам придется добавить пользовательские правила CSS для этого нового атрибута/класса:

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

источник

2016-11-23 13:47:36 jtate

Используйте ngBind когда нг-накидка не доступен.

<p ng-show="!isShow" ng-bind="isShow"></p>

источник

2017-10-15 11:32:53 Tushar

Как правильно использовать директиву ng-cloak?

ответ

Смежные вопросы