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

angularjs

102693 просмотра

7 ответа

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

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

Автор: JeremyWeir Источник Размещён: 12.11.2019 09:48

Ответы (7)


281 плюса

Решение

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

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

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

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

Автор: pkozlowski.opensource Размещён: 12.10.2012 08:38

196 плюса

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

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

Автор: Andrew Joslin Размещён: 12.10.2012 08:49

51 плюса

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

.ng-cloak { display:none; }
Автор: LOAS Размещён: 28.07.2013 08:30

39 плюса

Просто добавьте скрывающий 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 к заголовку страницы.

Автор: Bennett McElwee Размещён: 06.06.2014 04:40

21 плюса

В вашем 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>

Это оно!

Автор: Nathan Senevirathne Размещён: 05.02.2015 05:12

6 плюса

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

Автор: Martin Schüller Размещён: 07.11.2015 07:24

3 плюса

Я согласен с ответом @ 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>
Автор: Jaison Размещён: 27.12.2016 10:54
Вопросы из категории :
32x32