How can I change a scope variable using the on-scroll event in Ionic?

Question

I want to change value of a variable when the value of scroll position is greater than 100 from top but it doesn't work, the value doesn't change in $scope. Here is the code:

 <div ng-show="title===true">
  <p>{{title}}</p>
  <p>{{card.nome}}</p>
  <p>{{card.prezzo}}€</p>
</div>

<ion-content style="top:0px" delegate-handle="cardScroll" on-scroll="getPositionScroll()">

$scope.title = true;
  $scope.getPositionScroll = function () {
    console.log("scrollPosition " + JSON.stringify($ionicScrollDelegate.$getByHandle('cardScroll').getScrollPosition().top));
    console.log("valore title " + $scope.title);
    console.log($ionicScrollDelegate.$getByHandle('cardScroll').getScrollPosition().top >= 100);
    $scope.title = $ionicScrollDelegate.$getByHandle('cardScroll').getScrollPosition().top >= 100;
  };

Does anyone know why this is not working?

no there is no error. I print the value of title and in console the value change but not in the html.And ng-show is always true. — Claudiu, Dec 12 '16 at 16:42
if the value in the console changes then definitely the new scrolled value is there. what is the issue then? — Aravind, Dec 12 '16 at 16:45
But ng-show doesn't change value even if in console title is false and i don't know why. I tried also with $scope.watch but it not trigger. — Claudiu, Dec 12 '16 at 16:48

score 0 · Answer 1 · answered Dec 12 '16 at 17:57

I think it may have to do with the fact that Angular doesn't track changes that have been made by the getPositionScroll() function. A lot of Angular functions are wrapped in the $scope.$apply() function which notifies Angular about changes that have been made. But I think that the function used to track scrolling is not wrapped in this function, which means that you need to call it yourself.

So after $scope.title add:

$scope.$apply($scope.title);

There are a lot of questions regarding when to use $scope.$apply(), like this one, if overused it can cause serious harm to the performance of your app. There is also information about this in the Angular documentation. You may also find some insight in this question about when to use this function in a scroll event.

I tried your solution and it works fine, thanks a lot. – Claudiu Dec 13 '16 at 13:23 — Claudiu, Dec 13 '16 at 13:23

How can I change a scope variable using the on-scroll event in Ionic?

1 Answers1