Flickering of Angular ng-cloak/ng-show elements

This is a common issue you will see on most QA sites on the internet. The flickering issue seems to happen only when Angular.js script is running on Firefox browser or Safari and not on Chrome. This is probably because the Firefox compiler is a little slow thus causing the elements to appear for a while and then hide. Some answers suggest that this could be caused by two issues. Ng-cloak is applied late. If angular.js in the body or templates aren’t compiled soon enough and its in the templates or body. Second problem is ng-cloak is removed too soon. In the case of first problem i.e. angular.js in the body or templates are compiled too late use the ng-cloak directive and include the following lines 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;

}

Important! Is important. Lets see with the help of an example.

Example:

<ul class="nav">

<li><a href="/foo" ng-cloak>{{bar}}</a></li>

</ul>

Suppose you are using bootstrap.css then the following selector is important for your ng-cloak element.

.nav > li > a {

display: block;

}

Here if you include rule display:none; the bootstraps rule will take precedence and thus we will see the flickering before the template compiles.