ng-cloak and ng-show flashes the hidden element on screen

Question

ng-cloak and ng-show flashes the hidden element on screen

I have a div element that I only want to be show when my list of items empty. So I put in the following(in haml):

  #no-items.ng-cloak{ :ng_show => "items.length <= 0", :ng_cloak => true }

However, even after I've done that the element is still flashing on the screen. Then I saw Angularjs - ng-cloak/ng-show elements blink, but even after adding the following in my CSS, the blink still occurs.

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

Any ideas what I am doing wrong?

angularjs

Answer 1

use a ng-hide in the class, JS will take it off or set it again even if its there but till JS kicks in it can sit there and use CSS to hide your div

<div data-ng-controller="RoomsController">
<div ng-cloak class="ng-cloak ng-hide" data-ng-if="visible" >
    Some text
</div>        
</div>

Answer 2

Ensure the ng-cloak CSS shown above is being loaded at the beginning of your page.

This should be all you need to do:

<div ng-hide="items.length" ng-cloak>no items</div>

Sample fiddle.