How to call a function after AngularJS render all views

Question

How to call a simple function, after all AngularJS views loaded successfully.

function hello() {
  alert('All AngularJS works are done');
}

<!-- Below code is example about how I need a function for AngularJS loaded event -->
app.onAngularLoaded(function () { hello(); });
</script>

Maybe it help: http://stackoverflow.com/questions/14968690/sending-event-when-angular-js-finished-loading — Wédney Yuri, Apr 27 '15 at 17:13

score 4 · Answer 1 · answered Apr 27 '15 at 17:01

4

Try setting a timeout with a value of 0. That will happen after the current set of digest cycles.

$timeout(function(){...}, 0);

answered Apr 27 '15 at 17:01

HankScorpio

3,612
15
27

where I have to put this code? just inside – Vinoth Kannan Apr 27 '15 at 17:06
1

You run it in an angular controller or directive or somewhere within your angular code. `$timeout` is an angular wrapper for `timeout` that gets injected if you write a controller like this: `myModule.controller('MyController', function($timeout){...});` – HankScorpio Apr 27 '15 at 17:27

jusopi · Answer 2 · 2015-12-23T13:57:12.610

The problem w. what you are trying to tackle is that if you are using something like ng-include or ui-router then you won't know when those are finished loading until they are requested and loaded. It's an on-demand scenario.

You may however be looking to do something post-bootstrapping of the angular process? If that is the case you need to do something like this on you main/root angular module:

angular.module('app', [ ... any ng-dependencies here ...])
.controller(...)
.controller(...)
.directive(...)
.service(...)

//then here is where you do your post-bootstrapping logic
.run( function(){
   //code here
})

more info here - angular module docs

you switch between the } and ) in the end of the run function. — llioor, Dec 23 '15 at 10:48

score 0 · Answer 3 · answered Apr 28 '17 at 04:21

You can use directive to get it.

var homeApp = angular.module('home', ['ui.bootstrap', 'ngAnimate']);
homeApp
    .directive("pagecontent",
    function() {
        return {
            restrict: "E",
            link: function() {
                alert('All AngularJS works are done');
            },

            templateUrl: "template path",
        }

How to call a function after AngularJS render all views

3 Answers3