ionic(cordova)にて無限スクロールを実装する

今回やりたいこととしては以下
・サーバーからデータを取得してレスポンスがなくなるまで無限スクロール
・エラーがあったら再読み込みボタンを表示

普通の無限スクロールです。ひな形としてメモしておく。

f:id:yoppy0066:20170808180319g:plain:w250

想定するJSON

[{id: 1, name: "Tom"}, {id: 2, name: "Ben"},・・・]

コントローラー

  .controller('ChatsCtrl', function($scope, $http, $timeout) {
    $scope.items = [];

    // API URL                                                                                                                                                                                                     
    var url = "/path/to/api.json";

    // 1:リクエスト中 2:リクエスト完了 3:末尾に達した 9:エラー                                                                                                                                                     
    var status;

    $scope.get = function() {
      status = 1;
      $http.get(url)
        .success(function(result) {
          console.log(result);
          if (0 < result.length) {
            $scope.items = $scope.items.concat(result);
            $timeout(function() {
              $scope.$broadcast('scroll.infiniteScrollComplete');
            });
          } else {
            status = 3;
          }
        })
        .error(function(err) {
          console.log(err);
          status = 9;
        });
    };
    $scope.canWeLoadMoreContent = function() {
      return status != 3 && status != 9;
    };

    $scope.isError = function() {
      return status == 9;
    };

    $scope.retry = function() {
      status = 1;
      $timeout(function() {
        $scope.$broadcast('scroll.infiniteScrollComplete');
      });
    };

  })

テンプレート

<ion-list>
  <ion-item collection-repeat="item in items">                                                                                                                                                                     
    ・・・
  </ion-item>
</ion-list>
<ion-item ng-if="isError()" class="text-center">
  <button class="button button-clear button-assertive" ng-click="retry()">
    [エラー]タップで再読み込み
  </button>
</ion-item>
<ion-infinite-scroll
    ng-if="canWeLoadMoreContent()"
    on-infinite="get()"
    distance="5%">
</ion-infinite-scroll>

またコードずらずら書いただけだけど。以上です。