Angularjs – ng-cloak/ng-show elements blink

by

Though the documentation doesn’t mention it, it might not be enough to add the display: none; rule to your CSS. In cases where you are loading angular.js in the body or templates aren’t compiled soon enough, use the ng-cloak directive and include the following in your CSS:

/* 
  Allow angular.js to be loaded in body, hiding cloaked elements until 
  templates compile.  The !important is important given that there may be 
  other selectors that are more specific or come later and might alter display.  
 */
[ng\:cloak], [ng-cloak], .ng-cloak {
  display: none !important;
}

As mentioned in the comment, the !important is important. For example, if you have the following markup

<ul class="nav">
  <li><a href="https://stackoverflow.com/foo" ng-cloak>{{bar}}</a></li>
</ul>

and you happen to be using bootstrap.css, the following selector is more specific for your ng-cloak‘ed element

.nav > li > a {
  display: block;
}

So if you include a rule with simply display: none;, Bootstrap’s rule will take precedence and the display will be set to block, so you’ll see the flicker before the template compiles.

More Related Contents:

  1. Why are Callbacks from Promise `.then` Methods an Anti-Pattern
  2. Clicking a button within a form causes page refresh
  3. How to dynamically change header based on AngularJS partial view?
  4. Request header field Access-Control-Allow-Headers is not allowed by Access-Control-Allow-Headers
  5. What’s the recommended way to extend AngularJS controllers?
  6. Losing scope when using ng-include
  7. Element not visible error (not able to click an element)
  8. jasmine: Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL
  9. AngularJS dynamic routing
  10. Javascript ES6 class definition not accessible in window global
  11. I want to change the chart for each city or subcity selected
  12. Apply CSS style attribute dynamically in Angular JS
  13. Firebase TIMESTAMP to date and Time
  14. Angular js – route-ui add default parmeter
  15. Using require with relative paths
  16. Accessing $scope in AngularJS factory?
  17. Angularjs: call other scope which in iframe
  18. Angular ui router unit testing (states to urls)
  19. Angular.js: set element height on page load
  20. How can I handle browser tab close event in Angular? Only close, not refresh
  21. how to change the headers for angularjs $http.jsonp
  22. How can I access the value of a promise?
  23. How to check if a Javascript Class inherits another (without creating an obj)?
  24. Show pop-ups the most elegant way
  25. AngularJS: lazy loading controllers and content
  26. Is it a bad practice to use jQuery in Angular? [closed]
  27. Rename Object Key in an array using javascript
  28. Function Called Multiple Times in AngularJS Repeat Section
  29. Load static JSON file in Webpack
  30. jQuery match part of class with hasClass

Leave a Comment