Question

我试图为角度流星应用程序启用无限滚动，我正在处理从流星/蒙戈集合中绘制对象。

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

我想我需要使用类似于教程的反应变量，自动运行等，但我真的不知道如何使其适应无限滚动。考虑下面的例子，我应该如何调整我的控制器以使用无限滚动，从数据库中绘图，使用良好的角度流星练习进行制作？

Demo 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>

Demo 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);
  }
};

我在控制器内的角度流星分页代码：

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

在角度流星中创建无限滚动的流星集合

1 个答案: