ionic實現上拉加載更多（組件 ion-infinite-scroll使用，以及屢次加載的問題）

開發過程當中須要對展現內容實現上拉加載的更多效果，原本覺得實現沒有什麼難度，ionic自己就提供了ion-infinite-scroll組件可以完成咱們的開發須要。
先上代碼

<ion-view view-title="{{i18n.org_member_info_label}}">
  <ion-content>
      <div ng-repeat="item in table.trs" on-hold="table.touch(item)" class="item item-input-inset" ng-class-odd="'oddRow'" ng-click="showDetail(item)">
        <p ng-bind="item.realName" class="input-label w25p"></p>
        <p ng-bind="item.workType"></p>
        <i class="icon ion-ios-arrow-right icon-pos-right"></i>
      </div>
      <ion-infinite-scroll on-infinite="table.query()" distance="2%" ng-if="table.isLoadMore" immediate-check="false"></ion-infinite-scroll>
  </ion-content>
</ion-view>

$scope.table = {
      ths: CONFIG.project.orgTeamHead,
      trs: [],
      isLoadMore: true,
      currentPage: 0,
      maxPage: 1,

      /**
       * @ngdoc method
       * @name orgInfoCtrl#table.query
       * @methodOf table.query
       * @return {undefined}
       * @description Get members in this organization by workerContractList api.
       * */
      query() {
        this.currentPage += 1;
        if(this.currentPage > this.maxPage){
          this.isLoadMore = false;
          return;
        }
        apiService.getWorkerContractList({
          sid: $scope.userInfo.sid,
          team_id: data.id,
          request_status: $scope.i18n.request_status_complete_label,
          flag: 1,
          page: this.currentPage,
          limit: $scope.limit
        });
      },

      /**
       * @ngdoc method
       * @name orgInfoCtrl#table.dealData
       * @methodOf table.dealData
       * @param {Object} data - Server response.
       * @return {Undefined}
       * @description Handle response from server.
       * */
      dealData(data) {
        this.maxPage = Math.ceil(data.count / $scope.limit);
        $scope.table.trs = _.concat($scope.table.trs, data);
        this.isLoadMore = result.length >= $scope.limit;
        $timeout(() => {
          $scope.$broadcast("scroll.infiniteScrollComplete");
        });
      }
    };
    
     $scope.$on('stateChangeSuccess', function() {  
      $scope.table.query()
    });

這裏我截取了部分項目中的代碼來講明實現上拉加載更多的實現，官方文檔已經寫得很清楚了，這裏主要是提一下如何解決屢次調用的問題。
一、immediate-check屬性判斷是否在頁面載入後當即檢查滾動邊界 默認爲true(這將致使頁面載入後當即調用刷新)，若是不設置爲false時，可能咱們在進入頁面後直接調用了屢次的加載更多loadMore函數（這裏是query函數），設置FALSE後須要咱們在進入頁面後在stateChangeSuccess中調用加載更多的loadMore函數。
二、這裏在處理了數據dealData中，使用了一個定時器。若是不使用這個定時器，雖然數據請求回來了，可是內容尚未充滿整個屏幕，這時已經廣播$broadcast加載動做已經結束，它就會再自動執行一次或者屢次加載，形成數據錯誤
三、若是咱們全部的數據都請求完成，記得設置ng-if=false，控制不在執行上拉加載更多事件
四、ng-repeat可能在手機上調試時，一樣出現一次下拉，結果屢次調用，這時候用collcection-repeat代替，ng-repeat在渲染頁面的時候會觸發頁面的滾動， 致使上拉事件的觸發