Где именно использовать ngCloak в существующем приложении

У нас есть приложение AngularJS (а не SPA). Мы сталкиваемся с этой проблемой, когда некоторая часть нескомпилированного шаблона отображается на короткое время, поэтому я применяю директиву ngCloak к приложению.Где именно использовать ngCloak в существующем приложении

Я не уверен, где именно следует использовать эту директиву - каждый отдельный, маленький элемент или большие секции (или где-то еще). То, что я сейчас делаю, - это дросселирование соединения с помощью инструментов Chrome dev на очень медленной скорости, а затем проверка того, какие части шаблона отображаются в сыром состоянии. Но я считаю, что это не очень детерминированный подход.

Так что я хотел бы знать, где именно использовать ngCloak.

Thank you.

источник

2015-12-21 Harshil Sharma

вы, вероятно, должны preffer [нг-привязывать] (https:.//docs.angularjs.org/api/ng/directiv e/ngBind) над '{{}}', поэтому ng-cloak не требуется. – AntiHeadshot

@AntiHeadshot мы уже используем ngBind и не '{{}}'. –

Применение ngCloak для каждого маленького элемента, безусловно, неправильный путь.

Обычно вы хотели бы применить его либо к большим разделам, либо ко всей части вашей страницы, использующей Angular. Цель состоит в том, чтобы скрыть эти части страницы, пока Angular не будет готов к использованию.

Это то, что official documentation говорит:

директива может быть применена к <body> элементу, но предпочтительное использование является применение нескольких директив ngCloak на небольшие порции страницы для прогрессивного рендеринга браузера Посмотреть.

Если вы не хотите, чтобы ваши пользователи смотрели на пустое место, вы можете показать анимацию загрузки, пока Angular не закончит загрузку. Вы можете сделать это, давая элемент в ng-show="false" директиву:

<img src='/images/loading.gif' ng-show='false' />

источник

2015-12-21 12:44:39 JLRishe

точно вправо .. – Maher

Имеются ли последствия для широкого использования ngCloak? –

@HarshilSharma ngCloak работает с помощью правила CSS, которое скрывает объекты на странице до тех пор, пока Angular не будет загружен. Таким образом, это может повлиять на производительность, если вы используете тонну, но, вероятно, не так много. Лучший способ узнать это попробовать и посмотреть. – JLRishe

Пожалуйста, добавьте следующий код в головной части index.html

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

И вы можете добавить этот код в ваш файл CSS

Благодарности

источник

2015-12-21 12:44:38 Dineshaws

Без [нг-накидка] при запуске приложения перед angularJs рендеринга вы увидите некоторые угловые коды, как «{{myngModel}} или что-то вроде этого , когда вы кладете [нг-накидка] в проекте по ходу вы не видели эти коды до предоставления полной

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

<!DOCTYPE html> 
 
<html ng-app="app"> 
 

 
<head> 
 
    <title>app</title> 
 
</head> 
 

 
<body ng-cloak> 
 
</body> 
 

 
</html>

источник

2015-12-21 12:47:58 Maher

Где именно использовать ngCloak в существующем приложении

ответ

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