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 doc非常明确：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;
                      }
          })
        };
      });

加载视图时在AngularJS中预取

1 个答案: