javascript 使用 AngularJS 在滚动时隐藏 div

Hide a div on scroll with AngularJS

提问by Ali Hasan Imam

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:

我创建了一个滚动指令并用 $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();
            });
        };
    });

回答by Derek Ekins

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 上的滚动事件而不是窗口。我还更改了它设置的变量，以便将提供给滚动指令的值作为变量名称。

http://jsfiddle.net/Tx7md/

http://jsfiddle.net/Tx7md/

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

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

回答by abject_error

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.

使用指令不是一个完整的解决方案，除非您绝对确定可以仅使用 jqLit​​e 函数从 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 eventusing the $rootScope.emitto send a "div B is scrolling" event to the top level parent scope. The parent scope, when it receives this, will $rootScope.broadcastthe 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 正在滚动”事件发送到顶级父作用域。父作用域，当它接收到它时，将$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 破解的最难的坚果之一。好问题！