javascript - Angularjs - ng-cloak/ng-show elements blink -


i have issue in angular.js directive/class ng-cloak or ng-show.

chrome works fine, firefox causing blink of elements ng-cloak or ng-show. imho it's caused converting ng-cloak/ng-show style="display: none;", firefox javascript compiler little bit slower, elements appears while , hide?

example:

<ul ng-show="foo != null" ng-cloak>..</ul> 

though documentation doesn't mention it, might not enough add display: none; rule css. in cases loading angular.js in body or templates aren't compiled enough, use ng-cloak directive and include following in css:

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

as mentioned in comment, !important important. example, if have following markup

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

and happen using bootstrap.css, following selector more specific ng-cloak'ed element

.nav > li > {   display: block; } 

so if include rule display: none;, bootstrap's rule take precedence , display set block, you'll see flicker before template compiles.


Comments

Popular posts from this blog

c# - SVN Error : "svnadmin: E205000: Too many arguments" -

c++ - Using OpenSSL in a multi-threaded application -

All overlapping substrings matching a java regex -