Альтернатива ng-show/-hide или как загрузить только соответствующий раздел DOM

Question

Альтернатива ng-show/-hide или как загрузить только соответствующий раздел DOM

При использовании ng-show/-hide содержимое, включенное в эти блоки, сначала отображается на экране пользователя. Только после нескольких миллисекунд (после того, как angular.js загрузился и выполнил) правый блок появится в ng-show.

Есть ли лучший способ, чем ng-show/-hide для загрузки только соответствующего раздела данных в DOM?

Проблема с ng-view заключается в том, что у меня может быть только одно на странице, поэтому мне нужно переключить поведение многих разделов DOM на основе текущего состояния.

53

добавлено 28 Декабрь 2012 в 01:17 автор murtaza52 отредактировано 08 Май 2013 в 07:36

Просмотры: 2

источник

nl ja de

3 ответы

Чтобы избежать «вспышки несжатого содержимого», используйте ng-bind вместо {{}} или используйте ng-cloak :

Hello, {{name}}!

Если вы используете ng-cloak и не загружаете Angular.js в разделе заголовка своего HTML, вам нужно добавить это в свой файл CSS и обеспечить его загрузку в верхней части страницы:

[ng\:cloak], [ng-cloak], .ng-cloak { display: none; }

Обратите внимание, что вам нужно использовать эти директивы только на своей начальной странице. Контент, который вытягивается позже (например, через ng-include, ng-view и т. Д.), Будет скомпилирован Angular перед отображением браузера.

Есть ли лучший способ загрузить данные, отличные от ng-show/hide, в которые загружается только соответствующий раздел в DOM.

Некоторые альтернативы ng-show/ng-hide: ng-include , < a href = "http://docs.angularjs.org/api/ng.directive:ngSwitch" rel = "nofollow noreferrer"> ng-switch и (начиная с версии 1.1.5) ng-if :

<div ng-include src="someModelPropertySetToThePartialYouWantToLoadRightNow"></div>

См. Также https://stackoverflow.com/a/12584774/215945 для примера ng-switch, работающего вместе с ng -включают.

Обратите внимание, что ng-switch и ng-if добавляют/удаляют элементы DOM, тогда как ng-show/hide только изменяет CSS (если это важно для вас).

106

добавлено 28 Декабрь 2012 в 11:26 автор Mark Rajcok

источник

@MarkRajcok Я думаю, вы имеете в виду использование ng-bind вместо {{}} для показа содержимого

добавлено 16 Февраль 2016 в 11:10, автор ???????, источник

Привет @MarkRajcok Я пробовал это решение, но это не сработало для меня: (не могли бы вы взглянуть сюда? Дайте мне знать, что мне нужно включить, чтобы облегчить отладку! stackoverflow.com/questions/30540119/…

добавлено 30 Май 2015 в 01:52, автор Leon Gaban, источник

+1 за ответ

добавлено 29 Декабрь 2012 в 05:11, автор murtaza52, источник

@ user1226868, спасибо за комментарий. Я изложил свой ответ, отметив, что если вы загружаете Angular в нижней части страницы (что часто рекомендуется ), CSS будет загружаться слишком поздно. Кроме того, чтобы процитировать страницу API ng-cloak «Для получения наилучшего результата скрипт angular.js должен быть загружен в головной раздел html-файла, в качестве альтернативы, правило CSS (выше) должно быть включено во внешнюю таблицу стилей приложения «.

добавлено 08 Апрель 2013 в 06:52, автор Mark Rajcok, источник

@CMCDragonkai, plunker с ng-if. Примечание. Угловой v1.1.5 включен.

добавлено 29 Июль 2013 в 10:55, автор Mark Rajcok, источник

@ 太極者無極而生, хороший момент, спасибо. Я обновил ответ.

добавлено 17 Февраль 2016 в 08:59, автор Mark Rajcok, источник

Я пытаюсь использовать ng-if на основе выражения функции. Однако, несмотря на то, что функция работает, ng-if не удаляет DOM. Фактически, в моем недавнем приложении AngularJS он ничего не делает. Мне пришлось прибегнуть к ng-show. Может ли кто-нибудь дать реальный пример ng-if, работающего при удалении DOM?

добавлено 29 Июль 2013 в 10:28, автор CMCDragonkai, источник

Css не требуется, так как Angular помещает это в вашу голову.

добавлено 08 Апрель 2013 в 03:15, автор user1226868, источник

автор pors · Answer 1 · 2014-02-07T11:17Z

Я использовал трюк ng-cloak, и, похоже, он не работает так хорошо. Следуя документации Angular, я добавил следующее к своему CSS и это работает:

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

See: http://docs.angularjs.org/api/ng.directive:ngCloak

автор XML · Answer 2 · 2013-11-03T01:46Z

Положительный ответ Марка Райкока: CodePen , показывающий ng-show, ng-switch и ng-if в действии, поэтому вы можете сравнить подходы и увидеть различия в том, как условный контент фактически отображается.

Обратите внимание, что некоторые люди считают, что ng-show немного быстрее, чем ng-switch и ng-if для шаблонов на основе файлов. Но вы можете использовать $ templateCache , чтобы предварительно загружать шаблоны во время начальной загрузки, уменьшая или устраняя это преимущество. Используя ng-switch и ng-if, вам больше не нужно иметь дело со скрытым условным содержимым, находящимся в DOM, когда это не нужно, и не допускать, чтобы выражения по этому контенту оценивались Angular в неподходящие моменты времени. Это экономит ваши ресурсы обработки, которые вам не нужно тратить, и избегает ошибок, которые могут быть выброшены, когда что-то оценивается преждевременно.