I have an angularjs app that is using ui-router. I have a page with subviews. I want to know when the page is fully loaded similar to document.ready. I know that angularjs has the $viewContentLoaded event, but that fires for each subview. So when you add that it will fire for each of your subviews. Does anyone know of a way to listen for an event that would let me know the whole page has finished loading?
Add a comment
|
1 Answer
You can bind to the $stateChangeSuccess event, and leverage the parameters however you wish (e.g. if you wanted to do something only for a specific toState)
$stateChangeSuccess - fired once the state transition is complete.
An example may include...
$scope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
// done -- do something
});
You can include this in places such as a controller or somewhere globally such as the run function and bind to $rootScope
See the ui-router docs for more information
3 Comments
Fedil Grogan
Well I don't think that would help in my case as I would have to hard code every "parent" state to see if that is the one that gave a success. I would like a solution that is more dynamic and can apply to any page. Also does this event only fire off once the whole page has been processed?
scniro
This can apply to any page. Can you explain a littler more what you are concerned abut?
scniro
@FedilGrogan have you made any progress on this? Did this resolve your issue or send you in the right direction? Please let me know