pre-fetch в AngularJS при просмотре изображения

Question

У меня есть приложение angularJS с бесконечной прокруткой: это означает, что каждый раз, когда я добираюсь до нижней части страницы, происходит новый вызов ajax.

Я просто хочу проверить, когда страница полностью загружена, каждый раз, когда происходит вызов ajax. Если я могу проверить, загружена ли страница, я могу предварительно выбрать json для следующей страницы.

window.onload работает только для статических страниц, а $scope.on/watch('$viewContentLoaded', function() {}) уволен как первое, когда я делаю вызов ajax. Я имею в виду: он уволен, и после этого я вижу элементы вызова ajax. Его следует уволить как последнее, когда страница загружена.

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

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

Answer 1

Хорошо, ребята, спасибо за помощь. Я разработал решение, и он работает нормально. Как всегда, для меня документ AngularJS очень ясен: it does says nothing, или это грязно.

Я использовал ngInfiniteScroll плагин в сочетании с относительной Reddit demo

только вопрос: что вы думаете о том, как я использовал $q? Это не хорошо для меня. Я имею в виду, что я определил interval только для использования $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; 
         } 
      }) 
     }; 
     });