I am trying to implement Infinite scroll in my Ionic/Cordova mobile application. My nextBatch variable holds the url to the next set of objects I need to fetch once the user hits the bottom of the page. The only problem is, when I try to access it in my loadMoreData() functions it comes out as undefined. I've tried using $rootScope only to get the same result. Any ideas how I should handle this?
Thanks!
.controller('HomeCtrl', function($scope,Model) {
var nextBatch; //holds the url of the next batch
$scope.model = []; //used in ng-repeat
//loads an array of 5 objects
Model.getAll().success(function(model){
nextBatch = model.meta.next; //for infinite scrolling
$scope.model = model.objects;
})
$scope.loadMoreData = function() {
if (nextBatch !== undefined) {
Model.getMore(nextBatch).then(function(model){
$scope.model.push(favours);
$scope.$broadcast('scroll.infiniteScrollComplete');
})
}
};
})
Here is how you can make synchronizing your infinite scroll. I mean blocking the loadMore until the first call (getAll is finished).
.controller('HomeCtrl', function($scope, Model, $q) {
var nextBatch; //holds the url of the next batch
$scope.model = []; //used in ng-repeat
var defer = $q.defer();
var promise = defer.promise;
//loads an array of 5 objects
Model.getAll().then(function(model){
nextBatch = model.meta.next; //for infinite scrolling
$scope.model = model.objects;
defer.resolve(model);
return defer.promise;
});
$scope.loadMoreData = function() {
promise.then(function(result){
if(nextBatch !== "END"){
Model.getMore(nextBatch).then(function(favours){
angular.forEach(favours.objects, function(item){
$scope.model.push(item);
});
nextBatch = favours.meta.next;
});
}
});
};
})