5

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

更新：

我创建了一个滚动指令并将其附加到 $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();
            });
        };
    });
4

2 回答 2

8

我不确定你为什么要这样做，但我用我认为你想要的东西创建了一个 jsfiddle。

我稍微修改了你的指令：

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

如您所见，现在绑定到 div 而不是窗口上的滚动事件。我还更改了它设置的变量，以便它将提供给滚动指令的值作为变量名。

http://jsfiddle.net/Tx7md/

这是一个使用 $parse 设置值的版本，如@ganaraj 建议的那样

于 2013-05-02T10:54:49.267 回答
2

我暂时假设您不想使用 jQuery。

除非您绝对确定可以仅使用 jqLit​​e 函数从 div B 获取对 div A 的引用，否则使用指令将不是一个完整的解决方案。

您可以做的是创建 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。如果它再次接收到事件，它会重置超时。

我同意，与仅使用 jQuery 相比，这相当复杂。但归根结底，您可能会获得更好的性能。总而言之，这是纯粹用 Angular 破解的更难的坚果之一。好问题！

于 2013-05-02T10:51:46.550 回答