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

Question

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?

Answer 1

You can put ng-hide in the class without affecting how the JS will work once loaded. However, it is useful to put it there so that CSS takes it into account while waiting for the JS to load.

<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.

Answer 3

None of the solutions worked for me. The only solution I found is the following:

In each controller, add:

$scope.$on('$viewContentLoaded', function () {
            $scope.completed = true;
});            

and in the html of each view , add ng-if="completed" to the topmost element. For example:

<div ng-if="completed">

Note: the problem is restricted to firefox and ui-router. There, ng-cloak is ignored and there is no css workaround. The only solution that worked for me is the one I gave above.