Problem with InfiniteScroll on v1.0.0-beta.12

[trubbuzjo]

HI, I'm working with the version of ionic "1.0.0-beta.12 Krypton Koala (09/10/2014)" and I have a problem with the infinite scroll.
the problem is that when I call the fetch () function in the service, it generates an infinite loop, as if the event "scroll.infiniteScrollComplete" would not be called.
I tried not to use the infiniteScroll and my data is well displayed. (http://codepen.io/calendee/pen/pzJLl)
I also tried to run various examples found here (airlines, etc.), but always with the same result, the fetch() function generates an infinite loop.
My code is:

HTML

 <ion-view title="Users">
    <ion-content class="padding" has-bouncing='true'>
        <ion-refresher on-refresh="doRefresh()"
                   pulling-text="Rilascia per ricaricare..."
                   refreshing-text="Caricamento!"
                   refreshing-icon="ion-loading-c">
    </ion-refresher>
    <ion-list>
        <ion-item ng-repeat="item in users"
                  class="item-thumbnail-left" href="#/tab/user/{{item.pk}}">

            <h2>{{item.fields.nome}}</h2>

            <h2>{{item.fields.descrizione | htmlToPlaintext}}</h2>
        </ion-item>

      </ion-list>
       <ion-infinite-scroll icon="ion-loading-c" on-infinite="fetchUsers()"
                         distance="5%">
       </ion-infinite-scroll>
    </ion-content>
  </ion-view>

Controller:
.controller('ListUsersCtrl', function ($scope, $q, $http, $timeout, DataService) {
$scope.limit = 5;
$scope.title = "Users";
$scope.MoreItemAvailable = true;
$scope.users = []
$scope.fetchUsers = function(){
DataService.fetchUsers().then(function(data){
$scope.users = data;
console.log($scope.users)
$scope.$broadcast('scroll.infiniteScrollComplete');
})
}
$scope.fetchUsers()
})

Service:
.factory('DataService', ['$http', '$q', '$timeout', function ($http, $q, $timeout) {
var fetchUsers = function () {
var start = requestCounter * requestLimit;
var users = $http.get("data/users.json").success(function(data){
users = data
}).error(function(error){
console.log(error)
})
return users
}
}
return{
fetchUsers: fetchUsers
};
}

thank you

[drewrygh]

Hey @trubbuzjo - the scroll.infiniteScrollComplete event is triggered every time the function is called. It's purpose is to broadcast when a single cycle is done, not when the entire list is done. There isn't a way for angular/ionic to know when you want to stop trying to load more data, but you can define this yourself:

<ion-infinite-scroll
  ng-if="moreDataCanBeLoaded()"
  icon="ion-loading-c"
  on-infinite="loadMoreData()">
</ion-infinite-scroll>

So in your example you could have two variables - previousLength and currentLength. Each contains the length of the list of your data array (data.airlines.length in your example). If you are updating them each time the function is called, when they are both equal, you can have loadMoreData() return false. The ng-if will then prevent the function to load more data from being called.

Let me know if that fixes your problem :)

[trubbuzjo]

Hello, the problem was just the condition of the end loading on the InfiniteScroll directive.
More precisely, at some point my service returned an empty array that generated the loop.
Another important aspect is that if performing the test with Ripple i don't have the same behavior that would occur on a device.

Thanks for reply.

[drewrygh]

Ahh, got it. Ripple is awesome, but it seems there are quite a few bugs that need to be worked out still.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.