When you have an element you want to hide, you can add a ng-show='isOpen'
attribute to that element. When you set isOpen
to 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)
The
ng-cloak
directive
Show archive.org snapshot
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.
Specific fix
ngHide
/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 ng-cloak
approach.