Ionic - 从控制器强制刷新动画答案

【问题标题】：Ionic - Force refresh animation from controllerIonic - 从控制器强制刷新动画
【发布时间】：2014-12-12 04:11:18
【问题描述】：

有人知道是否有办法从控制器的 ion-refresher 触发刷新动画？

我想以复习的方式开始页面

我尝试使用$ionicScrollDelegate.scrollBottom() 模拟拉动动作，并在刷新器中设置delegate-handle 并从那里调用滚动$ionicScrollDelegate.$getByHandle('scroll').scrollBottom()，但没有成功。

有什么想法吗？

提前致谢！

【问题讨论】：

标签： javascript ionic-framework

【解决方案1】：

我终于为此创建了自己的指令如果有人想要达到同样的效果，我会分享它

loadingDirective.js

angular.module('app')
.directive('loadingDirective', ['$compile', function($compile) {
  'use strict';

  var loadingTemplate = '<div class="loading-directive"><i class="icon ion-loading-d" /></div>';

  var _linker = function(scope, element, attrs) {
    element.html(loadingTemplate);
    $compile(element.contents())(scope);

    scope.$on('loading.hide', function() {
      element.addClass('closing');
    });
    scope.$on('loading.show', function() {
      element.removeClass('closing');
    });
  };

  return {
    restrict: 'E',
    link: _linker,
    scope: {
      content: '='
    }
  };
}]);

loadingDirective.sass

loading-directive {
  width: 100%;
  font-size: 30px;
  text-align: center;
  color: $scroll-refresh-icon-color;
  padding: 20px 0 10px 0;

  height: 60px;
  display: block;


  @include transition(height, padding .2s);

  .loading-directive {
    -webkit-transform: scale(1,1);
    transform: scale(1,1);

    @include transition(transform .2s);
    @include transition(-webkit-transform .2s);
  }

  &.closing {
    height: 0px;
    padding: 0px;

    .loading-directive {
      -webkit-transform: scale(0,0);
      transform: scale(0,0);
    }
  }

  i {
    -webkit-animation-duration: 1.5s;
    -moz-animation-duration: 1.5s;
    animation-duration: 1.5s;
  }
}

要在模板中使用，只需在内容开头添加<loading-directive>标签即可：

template.html

<ion-view>
  <ion-content>
    <loading-directive></loading-directive>
    <ion-refresher ng-if="refresherActive" pulling-text="Pull to refresh" on-refresh="refreshData()">
    <ion-list></ion-list>
  </ion-content>
</ion-view>

加载将在视图加载时显示，直到触发关闭事件在控制器中，$scope.$broadcast('loading.hide') 将关闭加载图标，$scope.$broadcast('loading.show') 将再次显示它

【讨论】：

【解决方案2】：

您可以直接使用ion-spinner 指令。 Ionic 的 pull-to-refresh 下拉后会显示ion-spinner 指令。

HTML：

<ion-spinner ng-if="isLoading"></ion-spinner>

JS：

（在您的控制器中...）

$scope.isLoading = true;

myFetchDataFunction().then(function() {
  $scope.isLoading = false;
});

【讨论】：

【解决方案3】：

无法使用 Ionic 的 API 触发刷新。刷新组件通过滚动超出滚动区域（开始显示刷新器）来工作，这是用户在下拉时必须做的事情。

最好的办法是显示加载正在与其他一些界面组件一起发生。

【讨论】：

感谢您的信息。我终于创建了一个自定义指令。如果有人有同样的问题，我在下面发布了代码