使用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 个解决方案

#1

更多相关文章

随机推荐