В AngularJS как вы загружаете страницу со скрытым элементом?

Question

В AngularJS как вы загружаете страницу со скрытым элементом?

0

В AngularJS как вы гарантируете, что элемент HTML запускается в скрытом состоянии при загрузке страницы?

На моей странице есть начальная задержка, когда контроллер создан, где элемент можно увидеть на экране, прежде чем он исчезнет.

Я пробовал комбинировать эти атрибуты различными способами:

<li 
    data-ng-show
    data-ng-if
    data-ng-cloak
    class="ng-hide"

но элемент всегда отображается на полсекунды на экране перед исчезновением.

Richard 01 июль 2015, в 11:27

Источник

Теги:

javascript

html

angularjs

4 ответа

1

Чтобы ng-Cloak работал, убедитесь, что у вас также есть соответствующее правило CSS:

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

Глянь сюда:

https://docs.angularjs.org/api/ng/directive/ngCloak

HaukurHaf 01 июль 2015, в 07:02

1

Есть несколько способов сделать это.

Это происходит только тогда, когда ng-app запускается, что загружается в AngularJS.
Бутстрапинг можно выполнить вручную в некоторый момент времени.

angular.module('appName', []);

angular.element(document).ready(function(){
  angular.bootstrap(document, ['appName']);
});

Другой метод - использовать ng-cloak. Это позволяет отображать часть страницы только тогда, когда AngularJS загрузился.

Установите class="ng-cloak" в своей части, которую вы не скроете, прежде чем AngularJS будет загружен.
Угловые включают в себя этот класс и просто применяют display: none !important для него.
Как только приложение загрузится, угловой поиск этих элементов и их отображение.

Обратите внимание, что хорошая практика заключается в том, чтобы resolves или объявлять (что вы можете объявить) в вашем способе конфигурации

gr3g 01 июль 2015, в 06:05

0

Дайте им класс css, который устанавливает их для display: none изначально. ng-show/ng-hide/ng-if следует переопределять их по мере необходимости, когда Angular наконец-то вздрагивает. Все это видно в начале, когда страница закончила рендеринг DOM, но Angular еще не инициализировал.

mGuv 01 июль 2015, в 07:09

0

Это не сработало для меня. Элемент остается скрытым навсегда.
Richard 01 июль 2015, в 09:15
0

@ Ричард Хм, прости за это. Это работает для нас. Мы должны использовать другой метод показа / скрытия.
mGuv 01 июль 2015, в 09:16

Ещё вопросы

Это не сработало для меня. Элемент остается скрытым навсегда.
@ Ричард Хм, прости за это. Это работает для нас. Мы должны использовать другой метод показа / скрытия.

pdem · Accepted Answer · 2015-07-01T06-54-00.000Z

Правильный способ управления загрузкой страницы - использовать "разрешение" на маршруте: он даст доступ к вашему контроллеру и частично, только когда возвращается асинхронный вызов.

см. решение в этой документации:

 https://docs.angularjs.org/api/ngRoute/provider/$routeProvider

Для вашего вопроса, если вам все еще нужно ng-show, оно должно работать, если вы включите переменные в false.

Изменение: извините, ng-show, похоже, действительно имеет проблему при угловой загрузке.

Решение выглядит как путь. Жаль, что я не знал об этом раньше, теперь я немного изменил наш код. Вот более поучительная ссылка: odetocode.com/blogs/scott/archive/2014/05/20/… . (Также, начиная с моих переменных, установленных в false, не работает.)
Пожалуйста, проверьте мой ответ ниже, я думаю, что это резюме, что вы можете сделать