При использовании ng-show/-hide содержимое, включенное в эти блоки, первоначально отображается на экране пользователя. Только через несколько миллисекунд (после загрузки и выполнения angular.js) в ng-show появляется правый блок.
Есть ли лучший способ, чем ng-show/-hide для загрузки только соответствующего раздела данных в DOM?
Проблема с ng-view заключается в том, что я могу иметь только одну страницу, поэтому мне нужно переключить поведение многих разделов DOM на основе текущего состояния.
Чтобы избежать "вспышки несжатого содержимого", используйте ng-bind вместо {{}} или используйте ng-cloak:
<span ng-cloak ng-show="show">Hello, {{name}}!</span>
Если вы используете 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, ng-switch и (начиная с версии 1.1.5) ng-if:
<div ng-include src="someModelPropertySetToThePartialYouWantToLoadRightNow"></div>
См. также fooobar.com/questions/28030/... пример ng-switch, работающий вместе с ng-include.
Обратите внимание, что ng-switch и ng-if добавляют/удаляют элементы DOM, тогда как ng-show/hide только изменяет CSS (если это важно для вас).
Я использовал трюк ng-cloak, и он, похоже, не работает так хорошо. После документации 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
На марке Rajcok хороший ответ, здесь CodePen, показывающий ng-show, ng-switch и ng-if в действии, так что вы можете сравнить подходы и увидеть различия в том, как условное содержимое фактически отображается.
Обратите внимание, что некоторые люди считают, что ng-show немного быстрее, чем ng-switch и ng-if для файловых шаблонов. Но вы можете использовать $templateCache, чтобы предварительно загружать шаблоны во время загрузки, уменьшая или устраняя это преимущество. Используя ng-switch и ng-if, вам больше не нужно иметь дело с скрытым условным содержимым, находящимся в DOM, когда это не требуется, и не допускать выражения в этом содержимом, оцениваемые Angular в неподходящие моменты времени. Это экономит ваши ресурсы обработки, которые вам не нужно тратить, и избегает ошибок, которые могут быть выброшены, когда что-то оценивается преждевременно.