CODEWITHSUNDEEP
angularjsngcloak
user5235479
user5235479

Reputation:

Can't get ng-cloak to work

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>

Upvotes: 0

Views: 793

Answers (2)

alejandromav
alejandromav

Reputation: 943

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; 
}

Upvotes: 1

Sean3z
Sean3z

Reputation: 3745

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;
}

Upvotes: 2

Related Questions