Alternative to ng-show/-hide or how to load only relevant section of DOM

by

To avoid the “flash of uncompiled content”, use ng-bind instead of {{}} or use ng-cloak:

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

If you use ng-cloak, and you do not load Angular.js in the head section of your HTML, you will need to add this to your CSS file, and ensure it loads at the top of your page:

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

Note that you only need to use these directives on your initial page. Content that is pulled in later (e.g., via ng-include, ng-view, etc.) will be compiled by Angular before the browser renders.

Is there a better way to load data other than ng-show / hide, in which only the relevant section is loaded into the DOM.

Some alternatives to ng-show/ng-hide are ng-include, ng-switch and (since v1.1.5) ng-if:

<div ng-include src="https://stackoverflow.com/questions/14068711/someModelPropertySetToThePartialYouWantToLoadRightNow"></div>

See also https://stackoverflow.com/a/12584774/215945 for an example of ng-switch working together with ng-include.

Note that ng-switch and ng-if add/remove DOM elements, whereas ng-show/hide only alters the CSS (if that matters to you).

More Related Contents:

  1. How to cancel an $http request in AngularJS?
  2. htaccess redirect for Angular routes
  3. When writing a directive in AngularJS, how do I decide if I need no new scope, a new child scope, or a new isolated scope?
  4. How to access cookies in AngularJS?
  5. Can I use ng-model with isolated scope?
  6. AngularJS : Where to use promises?
  7. Confused about Angularjs transcluded and isolate scopes & bindings
  8. ng-repeat not updating on update of array
  9. AngularAMD + ui-router + dynamic controller name?
  10. AngularJS : $q -> deferred API order of things (lifecycle) AND who invokes digest?
  11. get original element from ng-click
  12. angularjs share data config between controllers
  13. Using ng-app without a value
  14. Angular $http vs service vs ngResource
  15. AngularJS watch array of objects for data change
  16. When to use the AngularJS `$onInit` Life-Cycle Hook
  17. Refreshing page gives “Page not found”
  18. AngularJS: ngRoute Not Working
  19. ERROR in Cannot find module ‘node-sass’
  20. Angular directive name: only lower case letters allowed?
  21. Rendering Highcharts using Angular js Directives
  22. How do I prevent reload on named view, when state changes? AngularJS UI-Router
  23. How to use `replace` of directive definition?
  24. How to highlight a selected row in ngRepeat?
  25. How to implement an ng-change for a custom directive
  26. ng-repeat specify a starting index
  27. how to make synchronous http request in angular js
  28. How to detect if a user clicks browser back button in Angularjs
  29. how do I get ng-include directive to work with a Content Delivery Network?
  30. Inject module dynamically, only if required

Leave a Comment