Ionic - Force refresh animation from controller

Question

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!

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