1

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 )
    }); 
});
Inspector Squirrel
  • 2,548
  • 2
  • 27
  • 38
sumitjainjr
  • 741
  • 1
  • 8
  • 28
  • 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

1 Answers1

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:

  1. https://stackoverflow.com/a/17239084/1356062
  2. https://stackoverflow.com/a/17303759/1356062
Community
  • 1
  • 1
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