Предотвратите кратковременное отображение двойной фигурной скобки до того, как angular.js скомпилирует / интерполирует документ

286

Кажется, что в IE есть проблема, когда загружается несколько изображений/скриптов, может быть достаточно времени, когда отображается литеральный {{stringExpression}} в разметке, затем исчезает один раз angular выполняется с его компиляцией/интерполяцией документа.

Есть ли общая причина, почему это произойдет, что указывает на то, что я делаю что-то вообще неправильное или существует известный способ предотвратить это?

Теги:

7 ответов

259
Лучший ответ

Я думаю, что вы ищете директиву ngCloak: http://docs.angularjs.org/api/ng.directive:ngCloak

Из документации:

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

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

Поделиться
  • 1
    Чтобы избежать необработанного HTML-кода Angular, является ли ngCloak широко распространенной практикой? Это кажется легким делом, но я не опытен в AngularJS.
  • 31
    Я не думаю, что это будет работать, если вы загрузите все сценарии в конце тела.
Показать ещё 5 комментариев
181

Кроме того, вы можете использовать <span ng-bind="hello"></span> вместо {{hello}}.

http://jsfiddle.net/4LhN9/34/

Поделиться
  • 92
    Одна из особенностей ng-bind, которая иногда упускается из виду, заключается в том, что вы можете указать текст, отображаемый во время загрузки Angular: <span ng-bind = "myScopeProperty"> loading ... </ span>. появится «загрузка ...», а затем будет заменена после определения myScopeProperty.
  • 0
    @MarkRajcok: спасибо за совет! Не имел представления. Это очень просто и элегантно и решает проблему, с которой я сам столкнулся.
Показать ещё 7 комментариев
50

Чтобы повысить эффективность подхода class= 'ng-cloak' при загрузке скриптов последним, убедитесь, что в начало документа загружен следующий css:

.ng-cloak { display:none; }
Поделиться
  • 4
    Добавление! Важно не плохая идея также.
  • 11
    Не будет ли visibility: hidden будет лучше?
Показать ещё 9 комментариев
40

Просто добавьте клоакинг CSS в начало страницы или в один из ваших файлов CSS:

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

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

Это именно то, что делает Angular: код в конце angular.js добавляет вышеприведенные правила CSS в начало страницы.

Поделиться
  • 0
    +1 Я сам придумал селектор [ngcloak] , но это более полно.
  • 1
    Отличный ответ! Я загружаю Angular в конце своего тела, поэтому ngCloak недоступен, и он по-прежнему мигает {{}}. Это исправило это.
18

В вашем css добавьте следующее

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

И затем в вашем коде вы можете добавить директиву ng-cloak. Например,

<div ng-cloak>
   Welcome {{data.name}}
</div>

Вот оно!

Поделиться
  • 0
    хороший ответ это
6

Вы также можете использовать ng-attr-src="{{variable}}" вместо src="{{variable}}", и атрибут будет генерироваться только после компиляции шаблонов. Это упоминается здесь в документации: https://docs.angularjs.org/guide/directive#-ngattr-attribute-bindings

Поделиться
2

Я согласен с ответом @pkozlowski.opensource, но класс ng-clock не работал у меня для использования с ng-repeat. поэтому я хотел бы рекомендовать вам использовать класс для простого выражения разделителя типа {{name}} и директивы ngCloak для ng-repeat.

<div class="ng-cloak">{{name}}<div>

и

<li ng-repeat="item in items" ng-cloak>{{item.name}}<li>
Поделиться
  • 1
    плащ, а не часы
  • 0
    Спасибо, что заметили ошибку

Ещё вопросы

Сообщество Overcoder
Наверх
Меню