Ion-refresher, on-refresh method and access to scope data

ionic-v1
1

Hi everybody,

I have a question about the ion-refresher component.
In an interface, i need to have a pull-to-refresh and a separate button that can also trigger the refresh.
My button ng-click and and the ion-refresh on-refresh both call the same function, which set a $scope variable ‘refreshing’ to true, then grab data, and turn the ‘refreshing’ variable to false again.
When the refresh function is called by ng-click, the variable ‘refreshing’ is modified, however, it’s not modified when called from the ion-refresher element, here is a codepen that show the issue:

See the Pen Pull To Refresh and Refresh button by Pierre VIGIER (@pierre-vigier) on CodePen.

It gives me the impression that when called from the on-refresh command of the ion-refresher, the function have no access to the $scope, does anyone have an idea for that?

Thanks,

Pierre

2

On the HTML

                                   add this
                                     vvvv
<ion-refresher on-refresh="doRefresh(true)">

On the controller receive the parameter and add a condition after setting ‘refreshing’ to true.

$scope.doRefresh = function(isIonRefresher) {
   $scope.refreshing = true;

   if(isIonRefresher) {
     $scope.$apply();
   }
...

The other option is weirder but it works:

$timeout(function() {
  $scope.refreshing = true; 
}).then(function() {
  $timeout( function() { 
    $scope.refreshing = false; 
  }, 1000);
})

There may be a better solution but those will work.

3

Hi Joseadrian,

Indeed it’s working pretty well, i should have thought about the digest cycle not called. ng-click is within Angular context, and i thought on-refresh was also.
Thanks for that solution, i updated the codePen as well

Pierre