CODEWITHSUNDEEP
javascripthtmlangularjs
mooonli
mooonli

Reputation: 2393

AngularJS event which is triggered after all scopes are applied

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

Upvotes: 1

Views: 721

Answers (4)

Hashbrown
Hashbrown

Reputation: 13013

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>

Upvotes: 0

Tzu ng
Tzu ng

Reputation: 9234

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>

Upvotes: 0

Vidhya Sagar Reddy
Vidhya Sagar Reddy

Reputation: 1631

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.. :)

Upvotes: 0

Shay Friedman
Shay Friedman

Reputation: 4868

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.

Upvotes: 3

Related Questions