How to hide expression in AngularJS during page loading?

Question

I have following code, for example:

div {{count}}

Then in my javascript, it will be replaced by a value.

However, somehow, if I refresh my page, the {{count}} will be displayed in page initially until page is fully loaded.

How can I hide it during page load?

Answer 1

You have 2 solutions

FIRST

You can use ng-bind

The ngBind attribute tells Angular to replace the text content of the specified HTML element with the value of a given expression, and to update the text content when the value of that expression changes.

<div ng-bind="count"></div>

SECOND

You can use ng-cloack

The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.

<div ng-cloack>{{count}}</div>

Answer 2

You can use ng-bind="count" or ng-cloak instead of {{count}}

<div ng-bind="count"></div>

<div ng-cloak>{{count}}</div>

If you use ng-cloak you might face some view flickering issues. Take a look at discussion here.

Answer 3

You can use ng-bind or ng-cloak for that.

E.g. :

<div> <span ng-bind="count"></span> </div>

<div ng-cloak>{{count}}</div>

Answer 4

Use ng-cloack, it has been created in order to prevent your issue, called FUOC (Flash Of Unstyled Content):

<div ng-cloak>{{count}}</div>