How to combine Ion Refresh and Ion Infinite Scroll?
I have it so far and it works horribly, every time I go to the bottom of the page it reloads and throws me back to the top
<ion-content>
<ion-refresher
on-refresh="doRefresh()">
</ion-refresher>
<div ng-repeat="post in posts">
<a ng-href="#/tabs/news/{{post.site_ID}}/{{post.ID}}">
<h2 ng-bind-html="post.title"></h2>
<p>{{:: post.date | date}}</p>
</a>
</div>
<ion-infinite-scroll
on-infinite="loadMore()"
distance="1%">
</ion-infinite-scroll>
</ion-content>
and controller
.controller('NewsCtrl', function($scope, $ionicLoading,
$stateParams, FreshlyPressed) {
$scope.posts = [];
$scope.loadMore = function() {
$scope.posts = FreshlyPressed.getBlogs($scope);
$scope.$broadcast('scroll.infiniteScrollComplete');
},
$scope.doRefresh = function() {
$scope.posts = FreshlyPressed.getBlogs($scope);
$scope.$broadcast('scroll.refreshComplete');
}
$scope.doRefresh();
});
source to share
It looks like the problem is with what you are passing infinteScrollComplete
and refreshComplete
before they are complete. They appear to be asynchronous requests, but you respond as if they are synchronous.
Here's what actually happens:
$scope.posts = FreshlyPress.getBlogs($scope); // call goes out
$scope.$broadcast(etc); // call is still out, this is too early
// (call comes back at a variable time, $broadcast needs to occur at that time)
To handle this, you will need either a callback or a promise, depending on your function api getBlogs
. Seems like getBlogs
doing a bit of magic to either add your result to the $ scope internally, or return an empty array / object and then populate it when the result comes in. In any case, this violates the principle of single responsibility. getBlogs
should just return the data in the callback / promise and let the controller decide what to do with that data.
var limit = 10; // max results
var offset = 0; // starting index
$scope.posts = []; // add results here as they come in
$scope.loadMore = function() {
FreshlyPressed.getBlogs(limit, offset).then(function(results) {
$scope.posts = $scope.posts.concat(results); // add results
offset = $scope.posts.length; // adjust offset for next query
$scope.$broadcast('scroll.infiniteScrollComplete');
});
}; // <-- you also had a comma here
To update, you would simply reset the state:
$scope.posts = []; // empty results
offset = 0; // start back at first post
And now you can download more messages as before.
source to share