2

In my angular code, I load some data in ajax which fill my template, so far so good... Then, once the data are loaded, I want to call a javascript function.

I couldn't find a way to have callback once the template is rendered. I have try several events but none are working.

My solution is to call the javascript method after a timeout:

$http.post('url').success(function (data) {
    $timeout(function () {/* process data */    }, 200);
});

It seems to work, but that's a timeout, nothing guarantee me that at the end of the timeout everything is rendered. Maybe it is working only because my PC is fast...

Is there an event based solution? Or any solution better than this one...

The jsfiddle of my solution : http://jsfiddle.net/ZCT4K/5/

tibo
  • 5,326
  • 4
  • 37
  • 53
  • Why are you putting a timeout in the success function at all? the data is already there when the success function executes. – Jason Jun 05 '13 at 02:45
  • data is used in the template. The data are available, but the template hasn't been rendered. – tibo Jun 05 '13 at 04:10
  • Just set the scope variables and the data will be there when the template renders. – Jason Jun 05 '13 at 04:24
  • I have updated my jsfiddle so you can understand. The data are available, the template is rendered, but I want to execute something after the template is rendered. – tibo Jun 05 '13 at 04:39
  • If you just stay inside of an angular scope this won't be an issue. See this fiddle: http://jsfiddle.net/sUXsJ/. What are you trying to accomplish outside of the controller's scope that can't be done in scope? – Jason Jun 05 '13 at 13:10
  • I need the variables to be accessible in javascript and the html to be rendered. Then I can draw a chart inside my HTML template using the data loaded. [Let's continue this discussion in chat](http://chat.stackoverflow.com/rooms/31294/discussion-between-tibo-and-callmekatootie) – tibo Jun 06 '13 at 03:22

1 Answers1

1

You need to $watch() your data. So you could try the following: 

$http.post('url')
    .success(function (data) {
         $scope.postData = data;
    });

//Watch the value of postData
$scope.$watch('postData', function () {
    if ($scope.postData === undefined || $scope.postData === null || $scope.postData === "") {
        return;
    }

    /*Else process your data*/
});
callmekatootie
  • 10,989
  • 15
  • 69
  • 104
  • not working : http://jsfiddle.net/ZCT4K/6/ I want to execute something after the template is fully rendered, not just after a data change. – tibo Jun 05 '13 at 04:40
  • @tibo Is this what you are looking for: http://stackoverflow.com/questions/14968690/sending-event-when-angular-js-finished-loading – callmekatootie Jun 05 '13 at 04:49
  • Not sure. The ready event should be triggered only when the document ready, at the first load of the page. I don't think it can be apply to my case, an ajax loading. – tibo Jun 05 '13 at 06:36
  • So you want the ajax to completely load and also the DOM to be updated with the data returned from the ajax call AND THEN you want to do something? – callmekatootie Jun 05 '13 at 06:55
  • Exactly! That's what I want to do – tibo Jun 05 '13 at 07:29
  • And why may I ask? I am pretty sure that there is an alternative to what you want to achieve. – callmekatootie Jun 05 '13 at 08:37
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/31294/discussion-between-tibo-and-callmekatootie) – tibo Jun 06 '13 at 03:13