ng-hide showing up shortly when loading page

Question

I have a div that is usually hidden:

<div id="errorDiv" x-ng-show="errorOccured">
    {{errorStatus}}: {{errorMessage}}
</div>

when I load the page, I see it for a short second, which I don't want. So I tried hiding it at start:

<div id="errorDiv" x-ng-show="errorOccured" class="ng-hide">
    {{errorStatus}}: {{errorMessage}}
</div>

but that didn't work :-( Is there any good way to hide a div at the time of page loading?

it turns out my solution would have worked. The problem was angularjs being loaded at bottom of page. But I guess ng-cloak is the cleaner solution. — EasterBunnyBugSmasher
– EasterBunnyBugSmasher, Commented May 9, 2014 at 19:18

Jussi Kosunen · Accepted Answer · 2014-05-09 18:58:01Z

4

ng-cloak is what you're looking for.

answered May 9, 2014 at 18:58

Jussi Kosunen

8,2973 gold badges30 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

EasterBunnyBugSmasher Over a year ago

I also had to add ng-cloak css to my css file, since I load angularjs at bottom of page. Is that bad practice?

Jared Reeves Over a year ago

I have noticed that there are some times where i still encounter brief view flashes even with ng-cloak, a better solution is to use the one way binding of ng-bind (and ngbindTemplate mentioned below) where ever possible.

Jussi Kosunen Over a year ago

@EasterBunnyBugSmasher: Putting scripts at the end of your page is useful if you want to render the page before loading scripts - in this case, however, that may not be what you want. Defining .ng-cloak in your own styles may be bad in case they're implemented in a different way in future. You could add your own class which is removed once the DOM (and angular) has loaded.

Jussi Kosunen Over a year ago

@JaredReeves: If you load angular.js at the bottom of the page, this is how it will manifest. ngBindTemplate may be fine for most cases but for non-trivial templates it makes your views a lot harder to read and maintain.

Jared Reeves Over a year ago

@JussiKosunen: I understand that view flashes are largely the result of loading angular at the bottom, however I have encountered this when angular is loaded at the top of the page as well.

Mike Quinlan · Accepted Answer · 2014-05-09 19:01:03Z

1

If you don't want to use ngCloak, there's always ngBindTempalate. Then your html would look like this:

<div id="errorDiv" ng-show="errorOccured" ng-bind-template="{{errorStatus}} : {{errorMessage}}"></div>

Documentation here:

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

It won't hide the div, but it won't populate it with ugly curly braces either.

answered May 9, 2014 at 19:01

Mike Quinlan

2,88219 silver badges26 bronze badges

Collectives™ on Stack Overflow

ng-hide showing up shortly when loading page

2 Answers 2

5 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Related