AngularJS event which is triggered after all scopes are applied

Question

I have a AngularJS application where I am loading data from a REST service.

Now what sometimes happens is that the brackets {{}} used to access values from scope are rendered and after that replaced by the real values. Now what I d like to do is add a ng-switch to the top DIV of the application and check whether a global var (e.g. pageLoaded (true|false)) is true or false. If its true, I d like to load the normal page, if its false, I d like to print something like "loading...". So my problem is how can I get notified (e.g. through a Angular Event) if all the data is ready, and is added to scope? Because after that I dlike to set pageLoaded to true.

Is there a way to do this in a generic way? I don't like to implement this per page.

Thanks a lot in advance.

Greets Marc

Answer 1

You should use ng-cloak for that - http://docs.angularjs.org/api/ng.directive:ngCloak

For showing a loading panel, you can do something like:

<div ng-hide="true">Loading...</div>

So when angular finishes loading, ng-hide will occur and hide the loading panel.

• mooonli: Hi Shay. Okay. Is it bad to use ng-cloak on the DIV where I include all subviews? E.g. <div ng-view ng-cloak> ? Are there any drawbacks? Or should I even use it on body?
• Shay Friedman: It is just CSS, so I can't see minor nor serious drawbacks. Maybe if there are tens of thousands of elements with ng-cloak on the page you might encounter performance problems, but in that case you'd probably have bigger problems than that :)

Answer 2

Use ng-cloak to get rid of this sort of problems. And make sure you apply the ng-cloak directive to the body of the page so that this doesn't show up till the data is loaded properly. And use the following styling in your CSS file.

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

Note: you can even create some other element or div, thats something like a popup or notification bar, which shows "please wait till the data is comnpletely loaded". Set this div to display:none initially and in the Ajax call, change the display property to block/inline as needed and finally make it dispay:none after the success call back.. :)

Answer 3

One of the solutions is you can use ng-bind instead of using {{}} which will show ugly {{}} when the value is not rendered.

<div ng-bind="value">Loading ...</div>

Answer 4

For anyone who is having a problem more to do with the actual question than OP's specific scenario:
I had a fragment that was getting loaded-in after/by the main partial that came in via routing.

I needed to run a function after that subpartial loaded and I didn't want to write a new directive and figured out you could use a cheeky ngIf

Controller of parent partial:

$scope.subIsLoaded = function() { /*do stuff*/; return true; };

HTML of subpartial

<element ng-if="subIsLoaded()"><!-- more html --></element>