Pull down to Refresh and Infinite Scroll

ionic-v1
1

I am using ionic 1.1.0

I have pull down to refresh and infinite scroll implemented following the examples.

They work individually.

The issue I have is, when I pull down to refresh, infinite scroll doesn’t run anymore when it reaches the bottom of the list.

Any idea why this is happening?

Any help is appreciated. Thank a lot in advanced.

2

Add some code sample, so anyone can help you out.

3

Here’s the view:

<ion-refresher
  pulling-text="拉下更新"
  on-refresh="doRefresh()">
</ion-refresher>

 <ion-infinite-scroll
    on-infinite="loadMore()"
    distance="1%">
  </ion-infinite-scroll>

Here’s the controller:

 $scope.doRefresh = function() {
    $scope.page = 1;
    var promise = JobsServices.getJobs($scope.page);
    promise.then(function(resolve){
      $scope.jobs = resolve.jobs;
    });
    $scope.$broadcast('scroll.refreshComplete');
  };

  $scope.loadMore = function() {
    $scope.page ++;
    JobsServices.getJobs($scope.page).then(function(resolve) {
      $scope.jobs = $scope.jobs.concat(resolve.jobs);
      $scope.$broadcast('scroll.infiniteScrollComplete');
    });
  };

Thanks!

4

Maybe your request returning some errors:

    JobsServices.getJobs($scope.page).then(function(resolve) {
          $scope.jobs = $scope.jobs.concat(resolve.jobs);
          $scope.$broadcast('scroll.infiniteScrollComplete');
        }, function() {
              console.log('Request error');
              $scope.$broadcast('scroll.infiniteScrollComplete');
});
5

I tried what you said, there’s no error. Basically loadMore() is not even getting called at all at the bottom of the list after I pull down to refresh. I put a console at the beginning of loadMore() and it run. Any ideas?

6

Ok, so when you put console.log() in loadMore() you get nothing after you pull down to refresh. And there is also no errors in doRefresh() request ?

$scope.loadMore = function() {
    console.log('Reached here');
    $scope.page ++;
    JobsServices.getJobs($scope.page).then(function(resolve) {
      $scope.jobs = $scope.jobs.concat(resolve.jobs);
      $scope.$broadcast('scroll.infiniteScrollComplete');
    });
  };

Show your template, please.