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

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

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

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

53
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
добавлено
@MarkRajcok Я думаю, вы имеете в виду использование ng-bind вместо {{}} для показа содержимого
добавлено автор ???????, источник
Привет @MarkRajcok Я пробовал это решение, но это не сработало для меня: (не могли бы вы взглянуть сюда? Дайте мне знать, что мне нужно включить, чтобы облегчить отладку! stackoverflow.com/questions/30540119/…
добавлено автор Leon Gaban, источник
+1 за ответ
добавлено автор murtaza52, источник
@ user1226868, спасибо за комментарий. Я изложил свой ответ, отметив, что если вы загружаете Angular в нижней части страницы (что часто рекомендуется ), CSS будет загружаться слишком поздно. Кроме того, чтобы процитировать страницу API ng-cloak «Для получения наилучшего результата скрипт angular.js должен быть загружен в головной раздел html-файла, в качестве альтернативы, правило CSS (выше) должно быть включено во внешнюю таблицу стилей приложения «.
добавлено автор Mark Rajcok, источник
@CMCDragonkai, plunker с ng-if. Примечание. Угловой v1.1.5 включен.
добавлено автор Mark Rajcok, источник
@ 太極 者 無極 而 生, хороший момент, спасибо. Я обновил ответ.
добавлено автор Mark Rajcok, источник
Я пытаюсь использовать ng-if на основе выражения функции. Однако, несмотря на то, что функция работает, ng-if не удаляет DOM. Фактически, в моем недавнем приложении AngularJS он ничего не делает. Мне пришлось прибегнуть к ng-show. Может ли кто-нибудь дать реальный пример ng-if, работающего при удалении DOM?
добавлено автор CMCDragonkai, источник
Css не требуется, так как Angular помещает это в вашу голову.
добавлено автор user1226868, источник

Я использовал трюк 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

2
добавлено

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

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

1
добавлено
Angular — русскоговорящее сообщество
Angular — русскоговорящее сообщество
3 960 участник(ов)

Общаемся на темы Angular 4+, его экосистемы, TypeScript, NativeScript и т.д. По вопросам SSR, Angular Universal @angular_universal_ru См. также: @typescript_ru, @react_js, @nodejs_ru, @js_ru Вакансии и поиск работы: @javascript_jobs

Angular.js (1.x) — русскоговорящее сообщество
Angular.js (1.x) — русскоговорящее сообщество
704 участник(ов)

Общаемся и обсуждаем темы, посвященные Angular 1.x и экосистеме.

AngularJS, Javascript
AngularJS, Javascript
370 участник(ов)

Angularjs russian chat