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();

});

      

+3


source to share


1 answer


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.

0


source







All Articles