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

Question

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

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

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

Answer 1

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

<span ng-cloak ng-show="show">Hello, {{name}}!</span>

Если вы используете ng-cloak и не загружаете Angular.js в разделе head вашего 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, ng-switch и (начиная с v1.1.5) ng-if:

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

См. Также /questions/26023109/sozdat-odin-html-predstavlenie-dlya-neskolkih-chastichnyih-predstavlenij-v-angularjs/26023115#26023115 для примера ng-switch, работающего вместе с ng-include.

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

Answer 2

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

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

Смотрите: http://docs.angularjs.org/api/ng.directive:ngCloak

Answer 3

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

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