Кажется, что в IE есть проблема, когда загружается несколько изображений/скриптов, может быть достаточно времени, когда отображается литеральный {{stringExpression}} в разметке, затем исчезает один раз angular выполняется с его компиляцией/интерполяцией документа.
Есть ли общая причина, почему это произойдет, что указывает на то, что я делаю что-то вообще неправильное или существует известный способ предотвратить это?
Я думаю, что вы ищете директиву ngCloak: http://docs.angularjs.org/api/ng.directive:ngCloak
Из документации:
Директива ngCloak используется для предотвращения шаблона Angular html от кратковременного отображения браузером в его сыром (нескомпилированном) когда приложение загружается. Используйте эту директиву, чтобы избежать нежелательный эффект мерцания, вызванный отображением шаблона html.
Директива может применяться к элементу
<body>, но обычно предпочтительным является мелкозернистая заявка, чтобы извлечь выгоду из прогрессивное отображение вида браузера.
Кроме того, вы можете использовать <span ng-bind="hello"></span> вместо {{hello}}.
Чтобы повысить эффективность подхода class= 'ng-cloak' при загрузке скриптов последним, убедитесь, что в начало документа загружен следующий css:
.ng-cloak { display:none; }
Просто добавьте клоакинг 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 в начало страницы.
В вашем 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>
Вот оно!
Вы также можете использовать ng-attr-src="{{variable}}" вместо src="{{variable}}", и атрибут будет генерироваться только после компиляции шаблонов. Это упоминается здесь в документации: https://docs.angularjs.org/guide/directive#-ngattr-attribute-bindings
Я согласен с ответом @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>