Geek asks and answers

Hide div on scroll using AngularJS

I am new to AngularJS. I want to hide div "A" in AngularJS when the user scrolls to div "B". I can currently hide div "A" when the user clicks on div "B" using ng-click, but I could not find a way to do this by scrolling with AngularJS. I know I can use jQuery to hide a div, but is there any way to do this using AngularJS?

Update:

I created a scroll directive and bound it to $ window. Now the div is hiding if I view the full window, but I want to hide it when a particular div scrolls. My current implementation looks like below:



    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();
            });
        };
    });
+5
source share
2 answers

, , jsfiddle , , , .

:

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

, div, . , , , scroll, .

http://jsfiddle.net/Tx7md/

, $parse , @ganaraj

+8

, jQuery.

, , div A div B, jqLite.

, 2 : "do-hide-on-scroll" div B "get-hidden-on-scroll" div A. , "" div B Angular $rootScope.emit "div B - " . , , $rootScope.broadcast , div A. Div. "get-hidden-on-scroll" , , div $timeout , div. , .

, , jQuery. , , . , Angular. !

+2

More articles:


All Articles