Предотвратите кратковременное отображение двойной фигурной скобки до того, как angular.js скомпилирует / интерполирует документ
102693 просмотра
7 ответа
Похоже, что это в первую очередь проблема в IE, когда нужно загрузить несколько изображений / скриптов, может быть достаточно времени, когда литерал {{stringExpression}}
в разметке будет отображаться, а затем исчезнет, когда angular завершится с его компиляцией / интерполяцией документ.
Существует ли распространенная причина, по которой это могло бы произойти, которая указала бы, что я делаю что-то в целом неправильно, или есть известный способ предотвратить это?
Автор: JeremyWeir Источник Размещён: 12.11.2019 09:48Ответы (7)
281 плюса
Я думаю, что вы ищете ngCloak
директиву: https://docs.angularjs.org/api/ng/directive/ngCloak
Из документации:
Автор: pkozlowski.opensource Размещён: 12.10.2012 08:38Директива ngCloak используется для предотвращения краткого отображения HTML-шаблона Angular браузером в исходном (некомпилированном) виде во время загрузки приложения. Используйте эту директиву, чтобы избежать нежелательного эффекта мерцания, вызванного отображением HTML-шаблона.
Директива может быть применена к
<body>
элементу, но предпочтительным является применение несколькихngCloak
директив к небольшим частям страницы, чтобы обеспечить прогрессивную визуализацию представления браузера.
196 плюса
Также вы можете использовать <span ng-bind="hello"></span>
вместо {{hello}}
.
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:4021 плюса
В вашем 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:126 плюса
Вы также можете использовать ng-attr-src="{{variable}}"
вместо, src="{{variable}}"
и атрибут будет сгенерирован только после компиляции шаблонов. Это упоминается здесь в документации: https://docs.angularjs.org/guide/directive#-ngattr-attribute-bindings
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
Вопросы из категории :
- angularjs AngularJS с Django - конфликтующие шаблоны тегов
- angularjs Can one AngularJS controller call another?
- angularjs Вставьте HTML в представление
- angularjs Как работает привязка данных в AngularJS?
- angularjs Могу ли я использовать другой префикс вместо `ng` с angularjs?
- angularjs Не удается добраться до $ rootScope
- angularjs Отслеживание просмотров страниц Google Analytics с помощью AngularJS
- angularjs Как сделать пейджинг в AngularJS?
- angularjs Where to put model data and behaviour? [tl; dr; Use Services]
- angularjs Скрытые поля в AngularJs
- angularjs Angularjs - элементы ng-cloak / ng-show мигают
- angularjs angularjs - обновление при нажатии на ссылку с фактическим URL-адресом
- angularjs Как я могу опубликовать данные в виде данных формы вместо полезной нагрузки запроса?
- angularjs Кодировка запроса Angularjs и плохие символы (в FF работают нормально)
- angularjs Как использовать ng-repeat без html-элемента
- angularjs AngularJS - Как использовать $ routeParams при генерации templateUrl?
- angularjs Использование запятой в качестве разделителя списков с помощью AngularJS
- angularjs 'this' vs $ scope в контроллерах AngularJS
- angularjs Как получить параметры URL, используя AngularJS
- angularjs Как вручную запустить отправку формы в AngularJS?