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

Question

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

我已经根据我的目的改编了 step 12 of the angular-meteor tutorial to use pagination for the app I'm working on, and now I'd like to convert to infinite scrolling. I've been trying to adapt both the code from the tutorial and 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-控制器内的流星分页代码：

$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) 设置正确（不是很小）以避免非常频繁的请求。

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

Creating an infinite-scroll of meteor collection in angular-meteor

meteor

nginfinitescroll

angular-meteor