问题
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.
回答1:
PLease check this one, seems like solution to your problem.
https://stackoverflow.com/a/13276214/801354
回答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;
}
回答3:
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.
来源：https://stackoverflow.com/questions/21302344/ng-cloak-doesnt-help-for-angular-ui-router-for-hiding-elements-while-template-p