加载视图时在 AngularJS 中进行预取

Question

我有一个无限滚动的angularJS应用程序：这意味着每次我到达页面底部时都会发生新的ajax调用。

我只想在每次发生 ajax 调用时检查页面何时完全加载。如果我能够检查页面是否已加载，我可以为下一页预取 json。

window.onload仅适用于静态页面，当我执行 ajax 调用时，$scope.on/watch('$viewContentLoaded', function() {})首先会触发。我的意思是：它被触发，之后我可以看到 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 文档非常清楚：它什么也没说，或者一团糟。

我已经将ngInfiniteScroll插件与相关的Reddit演示结合使用

只是一个问题：您如何看待我如何使用$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;
                      }
          })
        };
      });