page complete event in angularjs

Question

I am trying to get page complete event in angularJs after complete rendering of template.

Here is the code which I tried:-

app.controller('Mycontroller',function($scope,$http,$stateParams,$sce,$timeout){    

var request = $http({       
        url:"/test.php",            
        headers: {'Content-Type' : 'application/x-www-form-urlencoded'}                     
    }); 

    request.success(function(data){                     
        $scope.testhtml = $sce.trustAsHtml(data);               
    });

    $scope.$on('$viewContentLoaded', function(event) {   
            $('#firstcontent').trigger('create'); 
            alert('fullyloaded');       // this alert I am getting before template rendering , (I want this alert after template rendering )
    }); 
});

This should not happen within a controller. You should do this within a directive instead and use [$scope.$evalAsync](http://stackoverflow.com/questions/12304291/angularjs-how-to-run-additional-code-after-angularjs-has-rendered-a-template#answer-24228604) — CodingIntrigue, Sep 01 '15 at 11:13
You can use a `templteUrl` in a directive to fetch your markup, and the link function will fire after that's been compiled. — Alex, Sep 01 '15 at 11:21

score 0 · Answer 1 · edited May 23 '17 at 12:06

0

If you execute your code inside a $timeout, you can be sure that the template has been rendered already:

request.success(function(data){
    // executed within the currently running digest
    $scope.testhtml = $sce.trustAsHtml(data);

    $timeout(function(){
        // executes after the previously mentioned digest is complete
        // and after the DOM has been rendered
        $('#firstcontent').trigger('create');
        alert('fullyloaded');
    });
});

You may find the following answers additionally useful:

edited May 23 '17 at 12:06

Community

1
1

answered Sep 01 '15 at 11:26

Igwe Kalu

14,286
2
29
39

I have already tried that, but it is just a workaround for me. because the time delay is not a proper way to do that. sometime my scripts (ajax call) take a lot time and sometimes not. so I would give a time say 5 sec. and if my script is taking more time than that , so its not useful for me. I want only page completion event after complete template rendering. – sumitjainjr Sep 01 '15 at 12:48
@sumitjainjr, it's not a work around, instead it is exactly how it is done when developing with the AngularJS framework. If you noticed `$timeout` was called without specifying a delay. When used in that way, the outcome is that the function passed to `$timeout` will be executed as soon as possible i.e. after everything else ***currently*** queued in the *event loop* has been processed. – Igwe Kalu Sep 02 '15 at 07:23
I tried without specifying time delay, but when I refresh the page that alert is coming without being template rendered. – sumitjainjr Sep 02 '15 at 08:06

page complete event in angularjs

1 Answers1