wciu
wciu

Reputation: 1183

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?

Upvotes: 18

Views: 23915

Answers (4)

Theluckin
Theluckin

Reputation: 359

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>

Upvotes: 34

S&#225;mal Rasmussen
S&#225;mal Rasmussen

Reputation: 3505

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

Upvotes: 0

seguso
seguso

Reputation: 2273

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.

Upvotes: 1

Mark Rajcok
Mark Rajcok

Reputation: 364697

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.

Upvotes: 10

Related Questions