ionic 的下拉刷新 與 上拉加載

<ion-view view-title="消息通知">
  <ion-content class="padding">
　<!-- <ion-refresher> 下拉刷新指令  -->
  <ion-refresher pulling-text="Pull to refresh" on-refresh="vm.doRefresh()"></ion-refresher>
    <div class="list card" ng-repeat="message in vm.messages" >
      <div class="item item-divider item-icon-right">{{message.title}}
        <i class="icon" ng-click="vm.show(message)" ng-class="message.static?'ion-arrow-down-b':'ion-arrow-right-b'"></i></div>
      <div class="item item-body">
        <div>
          {{message.static?message.content:message.content.substr(0, 40)}}
        </div>
      </div>
    </div>
    <!-- ion-infinite-scroll 上拉加載數據指令 distance默認1% nf-if的值為false時，就禁止執行on-infinite  -->
    <ion-infinite-scroll ng-if="!vm.moredata" on-infinite="vm.loadMore()" distance="1%" ></ion-infinite-scroll>
  </ion-content>
</ion-view>

　1.　on-refresh 下拉觸發的函數 函數執行結束之前必須廣播下該事件結束 $scope.$broadcast('scroll.refreshComplete');

　2.　on-infinite 上拉觸發的函數 同樣需要廣播事件結束 $scope.$broadcast('scroll.infiniteScrollComplete');

js代碼

angular.module('starter.controllers', [])
.controller('InfoCtrl', function($rootScope, $timeout, $interval, $scope, $http, services) {
  var vm = $scope.vm = {
    moredata: false,
    messages: [],
    pagination: {
      perPage: 5,
      currentPage: 1
    },
    init: function () {
      services.getMessages({perPage: vm.pagination.perPage, page: vm.pagination.currentPage}, function (data) {
        vm.messages = data;
      })
    },
    show: function (message) {
      if (message.static) {
        message.static = false;
      } else {
        message.static = true;
      }
    },
    doRefresh: function () {
      $timeout(function () {
        $scope.$broadcast('scroll.refreshComplete');
      }, 1000);
    },
    loadMore: function () {
      vm.pagination.currentPage += 1;
      services.getMessages({perPage: vm.pagination.perPage, page: vm.pagination.currentPage}, function (data) {
        vm.messages = vm.messages.concat(data);
        if (data.length == 0) {
          vm.moredata = true;
        };
        $scope.$broadcast('scroll.infiniteScrollComplete');
      })
    } 
  }
  vm.init();
})

　　此處的messages 是view顯示的數據，pagination是做分頁加載顯示的參數，service是我封裝的$http服務，show方法是view信息顯示的開關（這些都可以不用注意）！

有不清楚的，可以提問！本人也是新手，大家一起共同學習進步！