Can't get ng-cloak to work

Question

I have a custom directive where I present the values in it using {{}} but the problem is when the page is reloading I get to see {{}} there before setting the values. I tried using ng-cloak but too bad it is not working for me. After googling this I found an article stating that the problem might be timing: that angular takes time to use ng-cloak when loading large contents. Is this right? Do I have to change anything in my settings? Is there a value I should pass to ng-cloak?

Here's my custom directive

<button ng-click="myCtrl.clicked()" ng-hide="myCtrl.conditionOne" ng-disabled="myCtrl.conditionTwo" class="{{myCtrl.class}}" ng-cloak>
    {{myCtrl.value}}
</button>

Please include the code that's causing problems. It's very hard to tell what the problem is without it. — ryanyuyu, Mar 15 '16 at 12:40
Yes I did! didn't work! Could it be the timing issue I read about? — , Mar 15 '16 at 13:07
Are you loading your JavaScript at the top or bottom of your index.html? If you let Angular add the ng-cloak styles then you need to load it at the top (head) of your index.html. Otherwise you can explicitly include the CSS rule as @Sean3z describes. — Martin, Mar 15 '16 at 13:10
I used javascript. on HTML, display:none and after my AngularJS assets are loaded, $(".[relevantClass]").css("display","block"); — Akber Iqbal, Jul 13 '18 at 11:33

score 2 · Answer 1 · answered Mar 15 '16 at 13:03

2

Typically, when ng-cloak "isn't working" it's due to not having the accompanying CSS:

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

answered Mar 15 '16 at 13:03

Sean3z

3,745
6
26
33

Yes I tried this and didn't work! Could it be the timing issue I read about? – Mar 15 '16 at 13:07

score 1 · Answer 2 · answered Jul 19 '16 at 10:38

Straight from angular docs:

For the best result, the angular.js script must be loaded in the head section of the html document; alternatively, the css rule above must be included in the external stylesheet of the application.

And that optional rule is:

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { 
    display: none !important; 
}

Can't get ng-cloak to work

2 Answers2