ng-cloak doesn't help for angular ui-router for hiding elements while template parsing

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.

Are you able to create a simplified fiddle? – Matt Way Jan 23 '14 at 08:42 — Matt Way, Jan 23 '14 at 08:42

score 4 · Accepted Answer · edited May 23 '17 at 10:32

4

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

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

edited May 23 '17 at 10:32

Community

1
1

answered Jan 23 '14 at 09:04

Ned

3,961
8
31
49

Oh... I wasn't aware that we had to add ng-cloak class ourself. Once I add that css it is working for undefined values as expected – Homan Feb 19 '14 at 23:18

score 1 · Answer 2 · answered Oct 26 '15 at 09:19

1

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

answered Oct 26 '15 at 09:19

Abhishek Goel

18,785
11
87
65

score 0 · Answer 3 · answered Oct 20 '16 at 09:52

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.

ng-cloak doesn't help for angular ui-router for hiding elements while template parsing

3 Answers3

Linked