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

Question

I'm trying to enable infinite scroll for an angular-meteor app I'm working on that draws objects from a meteor/mongo collection.

I've adapted 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 for my purposes.

I imagine I'll need to use reactive variables, autorun, etc. similar to the tutorial, but I don't really know how to adapt it for infinite scroll. Considering the example below, how should I adjust my controller for it to use infinite scrolling, drawing from a database, with good angular-meteor practices for production?

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 Function inside controller:

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

My angular-meteor pagination code inside controller:

$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;
};

score 2 · Accepted Answer · answered Jul 26 '15 at 18:12

2

Please look at this basic example https://github.com/barbatus/ng-infinite-scroll. Controller there re-subscribes every time onLoadMore is executed.

There is also a deployed demo http://ng-infinite-scroll.meteor.com.

Make sure this time angular.module('infinite-scroll').value('THROTTLE_MILLISECONDS', 500) is set properly (not very small) to avoid very frequent requests.

answered Jul 26 '15 at 18:12

barbatus

224
1
6

Wow, thank you for putting that together! It was much simpler to implement that I expected it would be, and I got my app to work on the first try following your basic example. I appreciate your help very much! – aliigleed Jul 26 '15 at 21:27

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

1 Answers1