Salami Salami - 27 days ago 8
AngularJS Question

ng-cloak directive gets removed too early

I have an angular-js app with some controllers that shouldn't be shown initially. They flash on the screen despite my use of ng-cloak. The problem seems to be that compile gets called and removes the ng-cloak directives and class, this makes the controllers contents visible even though it shouldn't be because ng-show is false.

If I pause js execution in ng-cloak's compile method I can see the elements appear as the ng-cloak directive is removed. If I pause js execution in the controller (for example on "$scope.visible = false;") I can see the controller stays visible on the page. The controller is then invisible again as it should be sometime later in loading.


  • I am loading my app.js and angular.js in the document HEAD

  • I have my css in the document HEAD

  • I have included the ng-cloak css rule with "!important" in my external css and inline



How can I prevent this flashing? Why doesn't ng-cloak pay respect to ng-show?

index.html:

<div ng-cloak class="ng-cloak" ng-controller="RoomsController" ng-show="visible">
<h1>This flashes, it can be seen if we set a breakpoint in the controller js, or after the ng-cloak directive's compile method in angular.js</h1>
</div>


app.js:

app.controller('RoomsController', ['$scope',
function ($scope) {
$scope.visible = false;
}
]);

Answer

I've reproduced your issue and the thing that worked for me was to create inner div and use ng-if directive instead of ng-show. I hope it helps.

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