Я пытаюсь включить бесконечную прокрутку для приложения 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;
};