加载视图时在 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 doc 很清楚：it does says nothing，或者是乱七八糟的。

我用过ngInfiniteScroll plugin combined with the relative 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 中预取

pre-fetch in AngularJS when view is loaded

javascript

ajax

prefetch

angularjs