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

Question

任何人都知道是否有办法从控制器的离子复习器触发刷新动画？

我想通过复习旋转来启动页面

我已经尝试过模拟拉动作,$ionicScrollDelegate.scrollBottom()并且通过delegate-handle在复习中设置一个并从那里调用滚动$ionicScrollDelegate.$getByHandle('scroll').scrollBottom()没有成功.

有什么想法吗？

提前致谢!

Answer 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')再次显示

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