在 angular-meteor 中创建无限滚动的流星集合

Question

我正在尝试为我正在开发的从流星/mongo 集合中绘制对象的 angular-meteor 应用启用无限滚动。

我已经调整 step 12 of the angular-meteor tutorial 为我正在开发的应用程序使用分页，现在我想转换为无限滚动。我一直在尝试调整教程中的代码和 this example from ngInfiniteScroll 以用于我的目的。

我想我需要使用类似于教程的反应变量、自动运行等，但我真的不知道如何使其适应无限滚动。考虑下面的例子，我应该如何调整我的控制器以使用无限滚动，从数据库中绘制，并在生产中使用良好的 angular-meteor 实践？

演示 ngInfiniteScroll HTML：

  <div infinite-scroll='loadMore()' infinite-scroll-distance='2'>
    <img ng-repeat='image in images' ng-src='http://placehold.it/225x250&text={{image}}'>
  </div>

在控制器中演示 ngInfiniteScroll 函数：

$scope.images = [1, 2, 3, 4, 5, 6, 7, 8];
$scope.loadMore = function() {
  var last = $scope.images[$scope.images.length - 1];
  for(var i = 1; i <= 8; i++) {
    $scope.images.push(last + i);
  }
};

我在控制器中的 angular-meteor 分页代码：

$scope.page = 1;
$scope.perPage = 1;
$scope.sort = {'_id': -1};
$scope.orderProperty = '1';

$scope.images = $meteor.collection(function() {
  return Images.find({}, {
    sort : $scope.getReactively('sort')
  });
});

$meteor.autorun($scope, function() {
  $meteor.subscribe('images', {
       limit: parseInt($scope.getReactively('perPage')),
       skip: (parseInt($scope.getReactively('page')) - 1) * parseInt($scope.getReactively('perPage')),
       sort: $scope.getReactively('sort')
     }).then(function(){
       $scope.imagesCount = $meteor.object(Counts ,'numberOfImages', false);        
  });
});

$scope.pageChanged = function(newPage) {
  $scope.page = newPage;
}; 

Answer 1

请看这个基本的例子https://github.com/barbatus/ng-infinite-scroll。 每次执行 onLoadMore 时，控制器都会重新订阅。

还有一个部署的演示http://ng-infinite-scroll.meteor.com。

确保这次angular.module('infinite-scroll').value('THROTTLE_MILLISECONDS', 500) 设置正确（不是很小）以避免非常频繁的请求。