Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there a way to avoid AngularJS show all hidden elements until the page loads?

All elements with the ng-hide attribute are visible until the page loads (and angular hide them) – it makes a strange web page appearance until that. With jquery, I was used to set style="display:none" and show them when the js is done.

Am I doing something wrong in AngularJS? Or is there a better way to solve this?

Thanks a lot!

Example of the page showing all hidden elements while loading: enter image description here

like image 424
Eduardo Rosa Avatar asked May 26 '15 19:05

Eduardo Rosa


People also ask

Which directive is will hide the content until AngularJS has finished processing it?

(Best) Use the ng-cloak directive which will hide the content until Angular has finished processing it.

What is Ng-hide in AngularJS?

AngularJS ng-hide Directive The ng-hide directive hides the HTML element if the expression evaluates to true. ng-hide is also a predefined CSS class in AngularJS, and sets the element's display to none .

Can we use ng-show and Ng-hide together?

Absolutely not. First of all, the two directives can trip over each other( see this JSFiddle, as provided by Joel Skrepnek), and is generally just bad design. You can use a function, another field or just some more inline-logic.


1 Answers

Just Try

<div ng-app ng-cloak>
//Code 
</div>

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

like image 111
Vineet Avatar answered Nov 15 '22 06:11

Vineet