Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular how to prevent FOUC

Am I using ng-cloak correctly? In chrome the div with help text flashes before becoming hidden. If I add

style="display:none;"

to the anchor. I get no such flash. In my angular class hideHelp is true by default.

<a href="#" class="btn btn-sm btn-info pull-right ng-cloak" ng-cloak ng-click="toggleHelp()">Help</a>
    <div ng-hide="hideHelp" ng-cloak class="ng-cloak" >
          blah blah blah help.....
    </div>
like image 432
Tim Avatar asked Sep 29 '14 20:09

Tim


1 Answers

If you're using ngCloak you have to add specific styles in your <head> (so they work before AngularJS is loaded).

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
}

https://docs.angularjs.org/api/ng/directive/ngCloak

like image 89
Michał Miszczyszyn Avatar answered Sep 29 '22 09:09

Michał Miszczyszyn