Блог

Главная - Вопросы по программированию - Как я могу избежать задержки, когда ng-class применяется к тегу body?

Как я могу избежать задержки, когда ng-class применяется к тегу body?

#angularjs

#angularjs

Вопрос:

Я использую имя класса в <body> теге страницы, чтобы определить, будет ли увеличено содержимое страницы.

 <body 'ng-class'=> "Preferences.zoomed()">

Значение по умолчанию Preferences.zoomed() равно false, и поэтому страница загружается в не увеличенном состоянии.

К сожалению, кажется, что между загрузкой страницы и ng-class получением оценки существует небольшая задержка. Это означает, что когда страница загружается (и настроена на масштабирование), она постоянно (хотя и ненадолго) переходит из состояния без увеличения в состояние увеличения, что вызывает неприятное мерцание.

Я полагаю, это связано с тем, что Angular вычисляет после загрузки dom…

Я предполагаю, что это кратковременное состояние возникает из-за того, что angular не анализируется и не оценивается до завершения загрузки dom. Следовательно, страница загружается с zoom=false помощью, а затем переключается на zoom-true .

Как я могу заставить ng-class оцениваться при загрузке на страницу?

Есть ли какой-либо способ заставить Angular вычислять это выражение по мере загрузки самого элемента и избежать этого мерцания?

Комментарии:

1. docs.angularjs.org/api/ng/directive/ngCloak

2. @PeterNixey: Нет, вы не можете выполнить оценку Angular до загрузки DOM. Если это так важно (и если ngCloak это не работает для вас), возможно, вы могли бы использовать «vanilla JS». Что такое «Preferences.zoomed()» ? Откуда оно берется и когда оно оценивается?

3. Preferences.zoomed() — это метод доступа на фабрике, который хранит предпочтения пользователя по масштабированию страницы. Вы можете увидеть эффект от этого здесь: brojure.com/brojure/tip-top-interior-design . В правом верхнем углу страницы есть переключатель, который изменяет ваш префикс масштабирования. ng-cloak, похоже, действительно выполняет свою работу, хотя теперь есть краткая вспышка без содержимого 😉 staging.brojure.com/brojure/greece-the-cyclades-islands . В конечном счете мне нужно сделать приложение SPO, но тем временем ng-cloak, похоже, выполнил свою работу

Ответ №1:

Пожалуйста, посмотрите здесь https://docs.angularjs.org/api/ng/directive/ngCloak

 <body 'ng-class'=> "Preferences.zoomed()" ng-cloak="">

css:

 [ng:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}
Метки: ,