Question

我是AngularJS的新手。当用户滚动div“B”时，我想在AngularJS中隐藏div“A”。目前，当用户通过使用ng-click点击div“B”时，我可以隐藏div“A”，但是在使用AngularJS滚动时我找不到任何方法。我知道，我可以使用JQuery来隐藏div但是有没有办法用AngularJS做到这一点？

更新

我创建了一个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();
            });
        };
    });

Answer 1

我不确定你为什么要这样做，但我创造了一个我认为你想要的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/

Here is a version使用$ parse设置@ganaraj

建议的值

Answer 2

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

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

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

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

使用AngularJS隐藏滚动div

2 个答案: