Ionic framework infinite scroll just have called one time - angularjs

Question

I have tried to build mobile app with ionic framework in the recent day. And I found that the list directy of ionic is very slow when it has just about 30 items or more, it's very bad. I've tried the bindonce method in angularjs to reduce the number of watchers but it's not help much. So I tried to use the infinite scroll function that ionic has.
My template is like this:
<view title="'Pet Information'">
<content has-header="true" has-tabs="true" on-infinite-scroll="loadMore">
<list>
<item ng-repeat="pet in pets" type="item-text-wrap" href="#/tab/pet/{{pet.id}}">
<h3>{{pet.title}}</h3>
<p>{{pet.description}}</p>
</item>
</item>
</list>
</content>
</view>
And my controller
.controller('PetIndexCtrl', function($scope, PetService) {
$scope.pets_all = PetService.all();
$scope.pets = [];
// Add just 10 pets at the first time
var count = 0;
for (var i = 0; i < 10; i++) {
$scope.pets.push($scope.pets_all[i]);
count++;
};
$scope.loadMore = function() {
var curr_count = count;
for (var i = curr_count; i < curr_count + 10; i++) {
if (i < $scope.pets_all.length) {
$scope.pets.push($scope.pets_all[i]);
count++;
} else {
return;
}
}
}
})
My idea is that the list will just load 10 items at the first time, and everytime user scroll to bottom edge of the phone it will call the loadMore function that will load 10 more items. But it seem that the loadMore function just have called one time, so that all I have is just the list of 20 items while my array is more than 100 items.
Maybe I'm wrong or the infinite scroll of ionic framework have error?

Answer 1

Seems there is a new way to do this in Ionic 2. Now you have to broadcast an event in the loadMore callback, to signalize that loading is finished.
$scope.$broadcast('scroll.infiniteScrollComplete');

Answer 2

I found what wrong with my code. I just missed the done callback in the code. I saw it in the example on github but I've just thought that it's a option not require, poor me :)
$scope.loadMore = function(done) {
$timeout(function(){
var curr_count = count;
for (var i = curr_count; i < curr_count + 7; i++) {
if (i < $scope.pets_all.length) {
$scope.pets.push($scope.pets_all[i]);
count++;
} else {
return;
}
}
done();
}, 1000);
}

Answer 3

For angular2/typescript ionic firebase app, the code below worked.
Set $event.state = "closed"; to call the function more than one time. The complete code is given below for reference.
In the component,
Import
import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
Declare
limit: number = 10;
itemRef:FirebaseListObservable<any[]>;
itemList:any;
loadeditemList:any;
Firebase Call
getData(){
this.itemRef = this.firebase.list('quote', {
query: {
orderByChild: 'title',
limitToFirst:this.limit
}
});
}
Scroll Call
onInfiniteScroll($event:any) {
this.limit += 10;
this.getData();
this.itemRef.forEach((itemList:any) => {
let items:any = [];
itemList.forEach( (item:any) => {
items.push(item);
return false;
});
this.itemList = items;
this.loadeditemList = items;
$event.state = "closed";
});
}
HTML
<ion-list>
...
</ion-list>
<ion-infinite-scroll (ionInfinite)="onInfiniteScroll($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
Call getData() and inject firebase in constructor.
private firebase: AngularFireDatabase