pre-fetch in AngularJS when view is loaded

Question

I have an angularJS application whit infinite scrolling: this means every time I reach the bottom of the page a new ajax call happens.

I simply want to check when the page is fully loaded, every time an ajax call happens. If I'm able to check if the page is loaded I can pre-fetch the json for next page.

window.onload works only for static pages, and $scope.on/watch('$viewContentLoaded', function() {}) is fired as the first thing when I do an ajax call. I mean: it is fired and after that I can see the items of the ajax call. It should be fired as the last thing, when the page is loaded.

$scope.nextPage = function() {
    $http.jsonp(url).success(function(response) {
        console.log(response.data);
    }

    $scope.$watch('$viewContentLoaded', function() {
        console.log("page is loaded");
    });
}

Answer 1

Ok guys, thanks for help. I've developed the solution and it's working fine. As usual, for me, AngularJS doc is very clear: it does says nothing, or it's a messy.

I've used ngInfiniteScroll plugin combined with the relative Reddit demo

Just a question: what do you think about how I've used $q? It's not nice for me. I mean I defined interval just to use $q.

HTML

<div ng-app='myApp' ng-controller='DemoController'>
  <div infinite-scroll='nextPage()' infinite-scroll-disabled='busy' infinite-scroll-distance='1'>
    <div ng-repeat='item in items'>
      <span class='score'>{{item.score}}</span>
      <span class='title'>
        <a ng-href='{{item.url}}' target='_blank'>{{item.title}}</a>
      </span>
      <small>by {{item.author}} -
        <a ng-href='http://reddit.com{{item.permalink}}' target='_blank'>{{item.num_comments}} comments</a>
      </small>
      <div style='clear: both;'></div>
    </div>
    <div ng-show='reddit.busy'>Loading ...</div>
  </div>
</div>

JS

var myApp = angular.module('myApp', ['infinite-scroll']);


      myApp.service('ajaxcall', function($http) {

        this.getjson = function (url) {

          return $http.jsonp(url).success(function(response) {
                console.log('inside service ' + response.data.children);
                return response;
              });
        }
      });


      myApp.controller('DemoController', function(ajaxcall, $scope, $q) {

        $scope.busy = false;
        $scope.items = [];
        var after = '';
        var prefetch = false;
        var get_items;


        $scope.nextPage = function() {

          if ($scope.busy) return;
          $scope.busy = true;

          if (!prefetch) {
            prefetch = true;
            get_items = ajaxcall.getjson("https://api.reddit.com/hot?after=" + after + "&jsonp=JSON_CALLBACK");
          }

          interval = $q.when(get_items).then(function(data) {

                      if (get_items) {

                        console.log(data);
                        var new_items = data.data.data.children;

                        for (var i = 0; i < new_items.length; i++) {
                          $scope.items.push(new_items[i].data);
                        }

                        after = "t3_" + $scope.items[$scope.items.length - 1].id;
                        get_items = ajaxcall.getjson("https://api.reddit.com/hot?after=" + after + "&jsonp=JSON_CALLBACK");

                        $scope.busy = false;
                      }
          })
        };
      });