Стратегия AngularJS, направленная на предотвращение появления незаполненного контента для класса
У меня есть проект AngularJS, я хочу предотвратить FOUC во время загрузки страницы на имя класса. Я читал о ng-template, но это кажется полезным только для содержимого внутри тега.
<body class="{{ bodyClass }}">
Я хотел бы, чтобы это было "логин" при загрузке страницы. Любая стратегия для этого? Или мне просто нужно выдумать и загрузить его как "логин" и вручную использовать javascript для настройки DOM только для этого экземпляра.
5 ответов
То, что вы ищете, это ng-cloak,
Вы должны добавить это так:
<body class="{{ bodyClass }}" ng-cloak>
и это предотвратит нежелательное мигание.
Ссылка на документы об этом.
Редактировать:
Также желательно поместить приведенный ниже фрагмент в ваш файл CSS, в соответствии с документами.
"Для достижения наилучшего результата скрипт angular.js должен быть загружен в раздел head документа ht ml; в качестве альтернативы приведенное выше правило css должно быть включено во внешнюю таблицу стилей приложения".
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
Одна из проблем, с которой вы сталкиваетесь, заключается в том, что браузер будет отображать <body> элемент до AngularJS загрузил и начал манипулировать DOM. О чем говорили другие люди ng-class правильно, он будет применять правильный класс, но вам все равно не нужно ничего показывать, пока Angular не будет готов.
В предыдущих версиях Angular вы могли сделать это:
<body style="display:none" ng-show="true" ng-class="{{bodyClass}}">
В последних версиях это не работает, однако, потому что ng-show делает его видимость путем добавления и удаления ng-hide класс (который менее специфичен, чем атрибут элемента)
То, что я делал недавно, это:
<head>
...
<style> <!-- Or you could include this in an existing style sheet -->
.ng-cloak {
display: none !important;
}
</style>
</head>
<body class="ng-cloak" ng-cloak ng-class="{{bodyClass}}">
Это означает, что <body> будет немедленно скрыт от стиля ng-cloak учебный класс. Когда Angular запустится, он обработает все директивы, включая ng-class а также ng-cloak, Так что ваши <body> элемент будет иметь правильный класс и будет видимым.
Подробнее читайте здесь директива нг-плащ
Есть решение проблемы с флэш-памятью в простом CSS, которое является пуленепробиваемым. Для класса корневого элемента вашего приложения добавьте следующее. Это решение работает по порядку обработки: все скрыто в CSS, загружается angular, а затем CSS показывает корень приложения. Мне нравится использовать это, так что если на странице есть другие неугловые элементы, они будут отображаться в первую очередь, заставляя страницу загружаться быстрее.
/* in your CSS file in head */
.myApp {
display:none;
}
<div class="myApp" ng-app="myApp"></div>
Непосредственно перед тем, как заканчивается тело, добавьте ссылки на ваш скрипт и немного встроенного CSS:
<script language="javascript" type="text/javascript" src="angular.min.js"></script>
<style>
.myApp {
display:block;
}
</style>
</body>
Вместо использования класса, вы должны использовать нг-класс
<body ng-class="{{ bodyClass }}">
Я заметил, что иногда даже нг-плащ, кажется, на самом деле не работает. Может я что то не так делаю.
<body ng-cloak class="{{ bodyClass }}">
Я также делаю еще одну маленькую вещь, похожую на @mbokil, вы можете скрыть элемент по умолчанию. Используя селектор атрибута, нацеленный на любые элементы с атрибутом ng-cloak, вы можете использовать угловые директивы. У этого есть несколько преимуществ, но главное преимущество состоит в том, что когда угловые выстрелы удаляются, этот атрибут вызывает перерисовку.
<style>
[ng-cloak] {
display:none;
}
</style>