Улучшить документацию Посмотреть исходный код ngCloak

Обзор

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

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

ngCloak работает в сотрудничестве со следующим правилом CSS, встроенным в angular.js и angular.min.js. Для режима CSP добавьте angular-csp.css в ваш HTML-файл (см. ngCsp).

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

Когда браузер загружает это правило CSS, все HTML-элементы (включая их потомков), помеченные директивой ngCloak, скрываются. Когда AngularJS сталкивается с этой директивой во время компиляции шаблона, он удаляет атрибут элемента ngCloak, делая скомпилированный элемент видимым.

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