Posted almost 2 years ago. Visible to the public. Repeats.

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 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 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:

Copy
<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.

By refactoring problematic code and creating automated tests, makandra can vastly improve the maintainability of your Rails application.

Author of this card:

Avatar
Dominik Schöler
Last edit:
about 1 year ago
by Henning Koch
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Dominik Schöler to makandropedia