AngularJS 1: How to keep "ng-hidden" elements from flickering on page load
When you have an element you want to hide, you can add a
ng-show='isOpen' attribute to that element. When you set
false on the scope, the element will be hidden.
However, when you load the page, the element is usually rendered by the browser before Angular has loaded and had a chance to hide it.
Generic fix (prefer)
ng-cloak directive was designed for exactly this purpose. Add a
ng-cloak attribute or class (and more, see the link) to any element you want to have hidden until Angular wakes up.
ngShow internally toggle the
ng-hide class on the element. Just add it to your element to have it already hidden on page load:
<some-element ng-show="isOpen" class="ng-hide"> ... </some-element>
Since this requires knowledge of the inner workings of
ng-hide, you should avoid it and prefer the