ng-cloak doesn't help for angular ui-router fo

Question

I'm using angular ui-router.

I want to show something if <div ng-show="total > 0">

While the template is downloaded and shown immediately we can see a flicker of the div, before the controller loads $scope.total =.

One would think that $scope.total is undefined in the beginning hence the div would be hidden, but I think the template isn't yet parsed, it's just shown raw. I tried using ng-cloak but it doesn't seem to help. Ngcloak is supposed to be used while angular is booting up, but I'm using ui-router so the angular stack is already loaded. How can I hide my elements on the template without resorting to ui-router resolves?

I'm using angular 1.2.8 and ui-router 0.2.7.

Answer 1

None of the solutions worked for me. The only solution 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.

Answer 2

You'll have to apply this style to get ng-cloak working

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

Answer 3

PLease check this one, seems like solution to your problem.

https://stackoverflow.com/a/13276214/801354