在 Ionic App 上实现 pullToRefresh 的最佳方式

Question

我正在使用 ion-refresher 指令在我的应用程序中实现下拉刷新。到目前为止，我能够在单个控制器和相应的 HTML 上实现它

我需要为我的所有屏幕实施它。每个屏幕都有一组不同的需要调用的承诺功能。我想避免为每个屏幕编写相同的代码。

有没有办法将 doRefresh 附加到根范围并实现指令，这样我就可以避免代码中的重复和垃圾邮件。

任何建议都会有用

Answer 1

为了在您的应用程序的每个页面中使用离子刷新器并在一个地方使用刷新功能，您需要在 app.js 文件中编写函数，例如:

.run(function($ionicPlatform, $rootScope, $http) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);

    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }

    $rootScope.doRefresh = function(page) {
      $http.get('PATH OF API')
       .success(function(newItems) {
          console.log("success "+page);
       })
       .finally(function() {
         // Stop the ion-refresher from spinning
         $rootScope.$broadcast('scroll.refreshComplete');
       });
    };

  });
})

例如，在您的应用程序中有 3 个页面，分别称为 1) 仪表板 2) 聊天 3) 帐户然后您需要在每个模板文件中编写下面提到的指令：

<ion-refresher
    pulling-text="Pull to refresh..."
    on-refresh="doRefresh('dash')">
  </ion-refresher>
  <ion-list>
    <ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="chat in chats" type="item-text-wrap" href="#/tab/chats/{{chat.id}}">
      <img ng-src="{{chat.face}}">
      <h2>{{chat.name}}</h2>
      <p>{{chat.lastText}}</p>
      <i class="icon ion-chevron-right icon-accessory"></i>

      <ion-option-button class="button-assertive" ng-click="remove(chat)">
        Delete
      </ion-option-button>
    </ion-item>
  </ion-list>

此处 doRefresh('dash') 是带有参数的函数，该参数具有当前屏幕名称（此处破折号用于仪表板）。其他页面也类似。

现在，在 app.js 文件中的 dorefresh() 函数中，您可以根据函数中传递的参数放置条件，并根据 promise 函数调用。

希望你能找到正确答案。

在 Ionic App 上实现 pullToRefresh 的最佳方式

Best way to implement pullToRefresh on Ionic App

angularjs

pull-to-refresh

ionic-framework