How to use ng-cloak in angular js properly?

Question

I have a basic question about ng-cloak In my page I have some places where are I binded some data using angular js {{ }}. Now, I used ng-cloak directive in the body tag and because of this the whole page is going blank for sometime until the page gets loaded, I just want the binded data to be hidden until the pages gets loaded.

What should I do?

Thanks in advance :)

Answer 1

The ng-cloak directive can be used on any html elements, so you probably just need to use it on an element which is a closer ancestor to where you have your binding expression, rather than on the body tag. For example, if your binding is inside a paragraph tag:

<p ng-cloak>{{ someVar }}</p>

It might be a good idea to place it on the element where the controller is defined, so all bindings within are hidden until angular is ready.

Answer 2

Simply use ng-bind instead of {{someVar}} like this

<p ng-bind="someVar"></p>

or if the var has some html content then use ng-bind-html. Hope this solves your problem.