У меня есть проект AngularJS, я хочу предотвратить FOUC во время загрузки страницы на имя класса. Я читал о ng-шаблоне, но это кажется полезным только для содержимого внутри тега.
<body class="{{ bodyClass }}">
Я бы хотел, чтобы это было "login" на загрузке страницы. Любая стратегия для этого? Или мне просто нужно выманить его и загрузить его как "логин" и вручную использовать javascript для настройки DOM только для этого экземпляра.
То, что вы ищете, это ng-cloak.
Вы должны добавить его следующим образом:
<body class="{{ bodyClass }}" ng-cloak>
и это предотвратит нежелательное мигание.
Ссылка на документы об этом
Edit:
Также рекомендуется поместить сниппет ниже в ваш файл CSS, согласно документам.
"Для достижения наилучшего результата в голову должен быть загружен angular.js scriptраздел html-документа; в качестве альтернативы, правило 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> будет иметь правильный класс и будет видимым.
Подробнее здесь директива ng-cloak
Существует решение проблемы со вспышкой в простой CSS, которая является пуленепробиваемой. Для класса корневого элемента приложения добавьте следующее. Это решение работает по порядку обработки: все скрыто в CSS, загружается angular, а затем CSS показывает корень приложения. Мне нравится использовать это, если на странице, которую они будут отображать, будут другие элементы angular, чтобы страница быстрее загружалась.
/* in your CSS file in head */
.myApp {
display:none;
}
<div class="myApp" ng-app="myApp"></div>
Как раз перед концом тела добавьте ссылки script и некоторые встроенные CSS:
<script language="javascript" type="text/javascript" src="angular.min.js"></script>
<style>
.myApp {
display:block;
}
</style>
</body>
Вместо использования класса вы должны использовать ng-class
<body ng-class="{{ bodyClass }}">
Я заметил, что иногда даже ng-плащ действительно не работает. Может быть, я делаю что-то неправильно.
<body ng-cloak class="{{ bodyClass }}">
Я также делаю еще одну маленькую вещь, похожую на @mbokil, которую вы можете скрыть элемент по умолчанию. Используя селектор атрибутов, предназначенный для любых элементов с атрибутом ng-cloak, вы можете использовать директивы angular. Это имеет несколько преимуществ, но основное преимущество - когда-то angular срабатывает, он удаляет этот атрибут, который вызывает перерисовку.
<style>
[ng-cloak] {
display:none;
}
</style>