Ionic - Force refresh animation from controller

Question

Ionic - Force refresh animation from controller

Anyone knows if there is a way to trigger the refresh animation from ion-refresher from the controller?

I want to start the page with refresher spinning

I have tried simulating the pull action with $ionicScrollDelegate.scrollBottom() and also by setting a delegate-handle in the refresher and the calling the scroll from there $ionicScrollDelegate.$getByHandle('scroll').scrollBottom() with no success.

Any thoughts?

Thanks in advance!

javascript
ionic-framework

Answer 1

I finally created my own directive for this I'm sharing it if someone is looking to achieve the the same

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

To use it in a template, just add <loading-directive> tag at the beggining of the content:

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>

The loading will be shown when the view is loaded until the close event is fired From the controller, $scope.$broadcast('loading.hide') will close the loading icon and $scope.$broadcast('loading.show') will show it again

Answer 2

There is no way to trigger the refresh with Ionic's API. The refresh component works by scrolling beyond the scroll area (which starts to expose the refresher), which is something the user has to do when they pull down.

Your best bet is to show the loading is happening with some other interface component.

Answer 3

You can just use the ion-spinner directive directly. Ionic's pull-to-refresh shows the ion-spinner directive after you pull down.

HTML:

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

JS:

(in your controller...)

$scope.isLoading = true;

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