Ion-refresher triggers ion-infinite-scroll's on-infinite method

ionic-v1
1

I put ion-refresher and ion-infinite-scroll component in one page,when I pull to refresh , ion-infinite-scroll’s on-infinite method will be called。I found that during refresh time, checkInfiniteBounds methods would be called many times 。(infiniteScrollCtrl.scrollEl.addEventListener(‘scroll’, infiniteScrollCtrl.checkBounds);

<ion-content>
        <ion-refresher pulling-text="Pull to refresh..." on-refresh="doRefresh()"></ion-refresher>
            <ul class="account-learning-dynamics my-learning-dynamics">
                <li  ng-repeat="dynamic in LearningDynamics">
                    <time am-time-ago="dynamic.create_time"></time>
                    <p><span>{{title}}</span>{{dynamic.content.content}}<i ng-if="dynamic.type == 2 || dynamic.type == 3" ng-click="showDetail(dynamic)">detail</i></p>
                </li>
            </ul>
        <ion-infinite-scroll immediate-check="false" on-infinite="loadMore()" ng-if="!noMoreItemsAvailable" distance="10%"></ion-infinite-scroll>
    </ion-content>
2

this is okay while your condition for infinite-scroll is valid during refreshing --> but in this time your list is maybe empty --> and you automatically reach the bottom of your scroll-view --> infinite scroll gets triggered. So i would add a flag on the scope which is true while refreshing.

so you can extend your ng-if like that: ng-if="!noMoreItemsAvailable && !refreshing"

3

Thanks, I had used follow code to change the value of refreshing。Can i listen to other events ? Any idea ?

solution one.
$timeout(function () {
     $scope.refreshing = false;
},1000);  

solution two.
<ion-content on-scroll-complete="changeStatus()">
$scope.changeStatus = function () {
      $scope.refreshing = false;
 };
4

you should set the flag during your refreshing code/request is running!

5

$scope.doRefresh = function () {
$scope.refreshing = true;
// fetch remote data
$http.get(apiUrl)
.success(…)
.error(…)
.finally(function(){
$timeout(function () {
$scope.refreshing = false;
},1000);
})
};

6

yep something like that !

7

Thank you bengtler. that fixed my problem as well. But the strange thing is my infinitescroll is not triggered on page load although I set $scope.LearningDynamics = [ ] on the controller. Any idea?

8

you can set the attribute: immediate-check="true" to you infinite scroll

9

Hi Bengtler, I did that but it didn’t work. I opened a different thread for the issue maybe you can give me a hand on the issue? With my knowledge and skills I have no idea how to debug further.