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();
    });
  });

至于上拉加载和下拉刷新的具体业务逻辑我看很多博客上都用了分页请求数据的方式，我们的项目可能因为别的原因，只采用下拉刷新请求最新的十条，上拉加载请求以此类推的后十条，本人觉得这样做是不太合理的，如果大家有什么好的方法可以在下方给我留言，谢谢！