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

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

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

Ответы

Ответ 1

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

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

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

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

Ответ 2

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

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

Ответ 3

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

.ng-cloak { display:none; }

Ответ 4

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

Ответ 5

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

Вот оно!

Ответ 6

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

Ответ 7

Я согласен с ответом @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>