Ion-refresher not working

Hi guys,

i have some problems with Pull refresh component. The event on-refresh does not triggered and the pulling-text/refreshing-text do not appear.

This is my code:

HTML:

<ion-content has-header="true" padding="true" scroll="true">

  <ion-refresher on-refresh="doRefresh()"
     pulling-text="Pull to refresh..."
     refreshing-text="Refreshing!"
     refreshing-icon="ion-loading-c">
  </ion-refresher>

<div ng-repeat="item in list" class="list card">
            <h2>{{item}}</h2>
    </div>
</ion-content>

JS:

$scope.list = ['Item 1', 'Item 2', 'Item 3'];
    $scope.doRefresh = function() {
        
        console.log('Refreshing!');
        $timeout( function() {

        $scope.list.push('New Item ' + Math.floor(Math.random() * 1000) + 4);
        $scope.list.push('New Item ' + Math.floor(Math.random() * 1000) + 4);
        $scope.list.push('New Item ' + Math.floor(Math.random() * 1000) + 4);
        $scope.list.push('New Item ' + Math.floor(Math.random() * 1000) + 4);

        //Stop the ion-refresher from spinning
        $scope.$broadcast('scroll.refreshComplete');
        
        }, 5000);
        
    };

Any idea?

Thanks in advance

I setup a working sample here : http://codepen.io/calendee/pen/huCnB

It’s basically the Ionic PTR demo with your modifications.

1 Like