Стратегия AngularJS для предотвращения неактивного содержимого для класса

У меня есть проект AngularJS, я хочу предотвратить FOUC во время загрузки страницы на имя класса. Я читал о ng-шаблоне, но это кажется полезным только для содержимого внутри тега.

<body class="{{ bodyClass }}">

Я бы хотел, чтобы это было "login" на загрузке страницы. Любая стратегия для этого? Или мне просто нужно выманить его и загрузить его как "логин" и вручную использовать javascript для настройки DOM только для этого экземпляра.

Ответы

Ответ 1

То, что вы ищете, это 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;
}

Ответ 2

Одна из проблем, с которыми вы сталкиваетесь, заключается в том, что браузер отобразит элемент <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

Ответ 3

Существует решение проблемы со вспышкой в ​​простой 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>

Ответ 4

Вместо использования класса вы должны использовать ng-class

<body ng-class="{{ bodyClass }}">

Ответ 5

Я заметил, что иногда даже ng-плащ действительно не работает. Может быть, я делаю что-то неправильно.

<body ng-cloak class="{{ bodyClass }}">

Я также делаю еще одну маленькую вещь, похожую на @mbokil, которую вы можете скрыть элемент по умолчанию. Используя селектор атрибутов, предназначенный для любых элементов с атрибутом ng-cloak, вы можете использовать директивы angular. Это имеет несколько преимуществ, но основное преимущество - когда-то angular срабатывает, он удаляет этот атрибут, который вызывает перерисовку.

<style>
  [ng-cloak] {
    display:none;
  }
</style>