Ionicで無限スクロールを使用しているときにスピナーを追加するにはどうすればいいですか？

Question

私はそれを働かせることができません。私はng-repeatを使用している間にをスクロールするときに同時に10個のアイテムを表示しようとしています（最初は10とスクロールしてから10個の新しいアイテム）。私が何をしても、私はそれを見ることができません。

HTML：

<li class="item" ng-repeat="schedule in Schedules | filter:scheduleSearch | limitTo:numberOfItemsToDisplay | orderBy: 'namesAlphabet' as names"> 
    Display some data 
</li> 
<ion-infinite-scroll on-infinite="addMoreItem()" ng-if="Schedules.length > numberOfItemsToDisplay"></ion-infinite-scroll> 

マイコントローラ：

$scope.numberOfItemsToDisplay = 10; // Use it with limit to in ng-repeat 
$scope.addMoreItem = function(done) { 
    if ($scope.Schedules.length > $scope.numberOfItemsToDisplay) 
     $scope.numberOfItemsToDisplay += 10; // load number of more items 
     $scope.$broadcast('scroll.infiniteScrollComplete') 
} 

私はこれをどのように行うことができますか？スクロールをアイコンにバインドする方法はありますか？

Answer 1

ロード中のアイコンが表示される前に、アイテムがあまりにも速く読み込まれ、infiniteScrollCompleteがブロードキャストされていると思われます。

このような状況でロードアイコンが表示されるようにしたい場合は、$timeoutを追加してください。

$scope.addMoreItem = function(done) { 
    $timeout(function() { 
     if ($scope.Schedules.length > $scope.numberOfItemsToDisplay) 
      $scope.numberOfItemsToDisplay += 10; // load number of more items 
      $scope.$broadcast('scroll.infiniteScrollComplete') 
    }, 2000); 
}