ionic ——— 下拉刷新及上拉加載

最近項目中使用了ionic的下拉刷新及上拉加載的功能；下拉刷新還好寫，但是在做上拉加載的時候遇到了點問題，下面先給大家把這個兩個功能的代碼代碼寫上，然後在說問題。

HTML頁面：

<ion-content ng-controller="MyController">
  <!--下拉刷新-->
  <ion-refresher
    pulling-text="下拉刷新..."
    on-refresh="doRefresh()">
  </ion-refresher>
  <ion-list>
    <ion-item ng-repeat="item in items"></ion-item>
  </ion-list>
  <!--上拉加載--當用戶到達頁腳或頁腳附近時，ionInfiniteScroll指令允許你調用一個函數-->
  <!--當用戶滾動的距離超出底部的內容時，就會觸發你指定的on-infinite-->在ion-content標籤內增加下面的代碼，很多童鞋上拉刷新實現不了，就是因爲這段代碼沒有加到content標籤內，因爲只有在標籤內的元素，纔會有scroll的效果。
 <ion-infinite-scroll
    ng-if="moreDataCanBeLoaded()"
    icon="ion-loading-c"
    on-infinite="loadMoreData()">
  </ion-infinite-scroll>
</ion-content>

其中 ng-if 是，當沒有更多數據加載時，使其等於false，將會禁止上拉加載on-infinite = "loadMoreData()"執行；

controller裏面的js代碼：

angular.module('testApp', ['ionic'])
  .controller('MyController', function($scope, $http) {
    $scope.items = [];
    $scope.doRefresh = function() {
      $http.get('/new-items')
        .success(function(newItems) {
          $scope.items = newItems;
        })
        .finally(function() {
          // 停止廣播ion-refresher
          $scope.$broadcast('scroll.refreshComplete');
        });
    };
    $scope.loadMore = function() {
      $http.get('/more-items').success(function(items) {
        $scope.items = $scope.items .concat(items);
        /*
         *1.使用一個定時器，爲了實現當返回的DOM都加載完之後，在廣播執行結束上拉加載的動作；
         * 2.如果不使用這個定時器，雖然數據請求回來了，但是內容還沒有衝滿整個屏幕，這是加載動作已經結束，它就會再自動執行一次或者多次加載，造成數據錯誤
         */
        var timer = $timeout(function(){
          // 停止廣播上拉加載請求
          $scope.$broadcast('scroll.infiniteScrollComplete');
        })
      });
    };
    $scope.$on('stateChangeSuccess', function() {
      $scope.loadMore();
    });
  });

至於上拉加載和下拉刷新的具體業務邏輯我看很多博客上都用了分頁請求數據的方式，我們的項目可能因爲別的原因，只採用下拉刷新請求最新的十條，上拉加載請求以此類推的後十條，本人覺得這樣做是不太合理的，如果大家有什麼好的方法可以在下方給我留言，謝謝！