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 )
 }); 
});

• CodingIntrigue: This should not happen within a controller. You should do this within a directive instead and use $scope.$evalAsync
• Alex: You can use a templteUrl in a directive to fetch your markup, and the link function will fire after that's been compiled.

Answer 1

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:

1. https://stackoverflow.com/a/17239084/1356062
2. https://stackoverflow.com/a/17303759/1356062

• sumitjainjr: 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.
• Igwe Kalu: @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.
• sumitjainjr: I tried without specifying time delay, but when I refresh the page that alert is coming without being template rendered.