使用AngularJS隐藏滚动div

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?

我是AngularJS的新手。当用户滚动div“B”时,我想在AngularJS中隐藏div“A”。目前,当用户通过使用ng-click点击div“B”时,我可以隐藏div“A”,但是在使用AngularJS滚动时我找不到任何方法。我知道,我可以使用JQuery隐藏div但是有没有办法用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:

我创建了一个scroll指令并用$ window附加它。现在,如果我滚动整个窗口,div将被隐藏,但我想在滚动特定div时隐藏它。我目前的实现看起来像下面:



    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();
            });
        };
    });

2 个解决方案

#1

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

我不确定你为什么要这样做,但我创造了一个我认为你想要的jsfiddle。

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.

你现在可以看到绑定到div上的滚动事件而不是窗口。我还更改了它设置的变量,以便将提供给scroll指令的值作为变量名称。

http://jsfiddle.net/Tx7md/

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

这是一个使用$ parse来设置@ganaraj建议的值的版本

#2

I'll assume for the moment that you don't want to use jQuery.

我现在假设您不想使用jQuery。

Using directives will not be a complete solution unless you're absolutely certain you can get a reference to div A from div B using only jqLite functions.

使用指令不是一个完整的解决方案,除非你绝对确定你只能使用jqLite函数从div B获得div A的引用。

What you can do is create 2 directives: "do-hide-on-scroll" for div B, and "get-hidden-on-scroll" for div A. Using these, you catch the "scroll" event on div B, and use it to generate an Angular event using the $rootScope.emit to send a "div B is scrolling" event to the top level parent scope. The parent scope, when it receives this, will $rootScope.broadcast the same to all its children scopes, one of which is div A. Div A's "get-hidden-on-scroll" directive would have an event handler which listens for this event, then hides the div, and sets a $timeout for half a second to show the div again. If it receives the event again, it resets the timeout.

你可以做的是创建2个指令:div B的“do-hide-on-scroll”和div A的“get-hidden-on-scroll”。使用这些指令,你可以捕获div B上的“scroll”事件,并使用它生成一个Angular事件,使用$ rootScope.emit将“div B is scrolling”事件发送到*父作用域。父范围,当它收到它时,$ rootScope.broadcast将相同的所有子范围,其中一个是div A. Div A的“get-hidden-on-scroll”指令将有一个事件处理程序,它监听这个事件,然后隐藏div,并设置$ timeout超时半秒以再次显示div。如果它再次收到事件,则重置超时。

This is fairly convoluted, I agree, compared to just using jQuery. But at the end of the day, you're probably getting better performance. All in all, one of the harder nuts to crack purely with Angular. Good question!

我同意,与仅使用jQuery相比,这是相当复杂的。但是在一天结束时,你可能会获得更好的表现。总而言之,一个纯粹用Angular破解的坚硬坚果。好问题!

#1