Angularjs - unable to show/hide element according to scroll location

Question

I'm trying to show an arrow icon to be used as "go to top" button, but only after some scrolling done by the user. The code used to work great using jquery, but I'm having hard time to achieve the same effect using angular. At the moment, the arrow is always seen in the bottom right corner of the screen.

JSfiddle here.

JS:

var myApp = angular.module('app',[]);

myApp.controller('ctrl', ['$scope', function($scope) {
     //detect scroll
    $(window).scroll(function (event) {
    var scroll = $(window).scrollTop();
        console.log(scroll);
        if(scroll>500 || scroll==undefined){
            $scope.showUpArrow = false;
        }else{
            $scope.showUpArrow = true;
        }
    });
}]);

HTML:

<div ng-app="app">
  <div ng-controller="ctrl">
    <div ng-hide="showUpArrow" id="goUp-cont">
      <a href="#top"><i class="fa fa-arrow-up fa-4x" id="goUp"></i></a>
    </div>
  </div>
</div>

See this answer... do it the angular way if you can... stackoverflow.com/questions/26319551/… — OliverJ90
– OliverJ90, Commented Jan 12, 2016 at 13:59

Pierre Gayvallet · Accepted Answer · 2016-01-12 13:57:07Z

3

You gonna need to manually $apply() (or $digest()) your scope, as you are in a jquery handler, so basically outside of angular cycle.

myApp.controller('ctrl', ['$scope', function($scope) {
     //detect scroll
    $(window).scroll(function (event) {
    var scroll = $(window).scrollTop();
        console.log(scroll);
        if(scroll>500 || scroll==undefined){
            $scope.showUpArrow = false;
        }else{
            $scope.showUpArrow = true;
        }
        **$scope.$apply();**
    });
}]);

should basically fix your problem

To avoid expensive digestion cycles on each scroll event when they are, most of the time, useless, you should also check the initial value of showUpArrow, triggering the digest cycle only if the value changed :

myApp.controller('ctrl', ['$scope', function($scope) {
     //detect scroll
    $(window).scroll(function (event) {
    var scroll = $(window).scrollTop();
    var oldState = $scope.showUpArrow;
        console.log(scroll);
        if(scroll>500 || scroll==undefined){
            $scope.showUpArrow = false;
        }else{
            $scope.showUpArrow = true;
        }
        if($scope.showUpArrow !== oldState) {
            $scope.$apply();
        }
    });
}]);

answered Jan 12, 2016 at 13:57

Pierre Gayvallet

2,9532 gold badges24 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alex Over a year ago

Thanks for the answer. Only one thing, the arrow is seen when the page first loads, why is so? showUpArrow is first evaluated to false.

arainone Over a year ago

@undroid, it is first evaluated to false because you have ng-hide="showUpArrow" in your HTML. It should be ng-show="showUpArrow", i updated a fiddle with those modifications

arainone · Accepted Answer · 2016-01-12 20:43:56Z

2

A call $scope.apply() is missing:

$(window).scroll(function (event) {
    var scroll = $(window).scrollTop();
    console.log(scroll);
    if(scroll>500 || scroll==undefined){
        $scope.showUpArrow = false;
    }else{
        $scope.showUpArrow = true;
    }
    $scope.$apply();
});

See it working on updated fiddle

More info on why you have to do this: here for example

edited Jan 12, 2016 at 20:43

answered Jan 12, 2016 at 13:59

arainone

2,01819 silver badges28 bronze badges

Collectives™ on Stack Overflow

Angularjs - unable to show/hide element according to scroll location

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related