18

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?

Community
  • 1
  • 1
wciu
  • 1,183
  • 2
  • 9
  • 24
  • There is no magic to ng-cloak. My guess is you have something wrong in your Hamel. I don't use it so I can't tell you what. Just debug in your browser. Load the page without angular app running. Is the HTML as expected ? Is it hidden ? – 34m0 Nov 22 '12 at 20:19

4 Answers4

34

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>
isherwood
  • 58,414
  • 16
  • 114
  • 157
Theluckin
  • 359
  • 3
  • 4
10

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.

Mark Rajcok
  • 362,217
  • 114
  • 495
  • 492
1

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.

seguso
  • 2,024
  • 2
  • 18
  • 20
0

There's currently an open issue for this: https://github.com/angular/angular.js/issues/14015

This workaround worked for me:

.ng-hide.ng-hide-animate {
    display: none !important;
}
Sámal Rasmussen
  • 2,887
  • 35
  • 36