Создание бесконечной прокрутки коллекции метеоров в angular-meteor

Я пытаюсь включить бесконечную прокрутку для приложения angular-meteor, над которым я работаю, которое рисует объекты из коллекции метеоров/монго.

Я адаптировал шаг 12 руководства по angular-meteor, чтобы использовать нумерацию страниц для приложения, которое я работаю, и теперь я хотел бы перейти на бесконечную прокрутку. Я пытался адаптировать как код из руководства, так и этот пример из ngInfiniteScroll для мои цели.

Я предполагаю, что мне нужно будет использовать реактивные переменные, автозапуск и т. Д., Как в учебнике, но я действительно не знаю, как адаптировать его для бесконечной прокрутки. Учитывая приведенный ниже пример, как мне настроить свой контроллер для использования бесконечной прокрутки, рисования из базы данных с хорошими методами углового метеора для производства?

Демонстрация 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;
}; 

person aliigleed    schedule 25.07.2015    source источник


Ответы (1)


Посмотрите на этот базовый пример https://github.com/barbatus/ng-infinite-scroll. Контроллер переподписывается каждый раз, когда выполняется onLoadMore.

Существует также развернутая демонстрация http://ng-infinite-scroll.meteor.com.

Убедитесь, что на этот раз angular.module('infinite-scroll').value('THROTTLE_MILLISECONDS', 500) установлено правильно (не очень мало), чтобы избежать очень частых запросов.

person barbatus    schedule 26.07.2015
comment
Вау, спасибо, что собрали это вместе! Это было намного проще реализовать, чем я ожидал, и я заставил свое приложение работать с первой попытки, следуя вашему базовому примеру. Я очень ценю вашу помощь! - person aliigleed; 27.07.2015