Hide a div on scroll with AngularJS

angularjs, angularjs-directive, javascript

Solution

I am not sure why you would want to do this but I created a jsfiddle with what I think you want.

I modified your directive slightly:

app.directive("scroll", function () {
        return function(scope, element, attrs) {
            angular.element(element).bind("scroll", function() {
              scope[attrs.scroll] = true;
                scope.$apply();
            });
        };
    });

as you can see in now binds to the scroll event on the div not the window. I've also changed the variable it sets so that it takes the value provided to the scroll directive as the variable name.

http://jsfiddle.net/Tx7md/

Here is a version using $parse to set the value as suggested by @ganaraj

Problem

I am new to AngularJS. I want to hide div "A" in AngularJS when a user scrolls on div "B". Currently I can hide the div "A" when user clicks on div "B" by using ng-click, but I could not find any way to do it with on scroll with AngularJS. I know, I can use JQuery to hide the div but is there any way to do it with AngularJS? Update: I created a scroll directive and attached it with $window. Now the div is hidden if I scroll the full window, but I want to hide it when a particular div is scrolled. My current implementation looks like bellow: ``` app.directive("scroll", function ($window) { return function(scope, element, attrs) { angular.element($window).bind("scroll", function() { if (this.pageYOffset >= 10) { scope.hideVs = true; } else { scope.hideVs = false; } scope.$apply(); }); }; }); ```

Original source