2013-05-02 144 views
5

我是AngularJS的新手。当用户在div“B”上滚动时,我想在AngularJS中隐藏div“A”。目前,当用户使用ng-click单击div“B”时,我可以隐藏div“A”,但是我找不到用AngularJS滚动的任何方法。我知道,我可以使用JQuery来隐藏div,但是有什么方法可以通过AngularJS来实现吗?隐藏与AngularJS滚动的div

更新:

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

+0

附加滚动事件到窗口的建议,并进行显示隐藏类和使用纳克级与像纳克级= {表达

http://jsfiddle.net/Tx7md/

Here is a version true:'active',false:inactive} [scrollpos ='diva'] – 2013-05-02 08:14:49

+0

您是否了解http://docs.angularjs.org/api/ng.directive:ngHide和http://docs.angularjs.org/ api/ng.directive:ngShow – Arcayne 2013-05-02 08:54:57

+0

是的,我知道ng-hide和ng-show。我可以显示/隐藏它的点击事件,但我怎样才能做滚动事件? @Arcayne – 2013-05-02 09:59:22

回答

8

我不知道你为什么想这样做,但我创建了一个我认为你想要的jsfiddle。

我修改你稍微指令:

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

,你可以看到,现在结合对DIV不是窗口的滚动事件。我还更改了它设置的变量,以便将提供给scroll指令的值作为变量名称。使用$解析来设定该值由@ganaraj

+0

谢谢。这是解决方案。我只是想通了,并没有看到你的答案。 – 2013-05-02 11:33:37

+2

哦,太棒了,请你把我的答案标记为正确的,谢谢 – 2013-05-02 12:57:45

+0

@DerekEkins你不应该做范围[attrs.scroll] = true。 (因为它不适用于像model.name这样的嵌套对象)相反,“正确”的方式是使用$ parse服务。 – ganaraj 2013-05-02 13:41:23

2

我会假设你不想使用jQuery。

使用指令不会是一个完整的解决方案,除非您完全确定您只能使用jqLit​​e函数从div B引用div A。

你可以做的是创建2个指令:div-B的“do-hide-on-scroll”和divA的“get-hidden-on-scroll”。使用这些,你可以捕获“scroll”事件在div B上,并使用它来生成一个角事件使用$rootScope.emit发送一个“div B正在滚动”事件到顶级父范围。当它收到这个父范围时,$rootScope.broadcast与其所有子范围相同,其中一个是div A. Div A的“get-hidden-on-scroll”指令会有一个侦听此事件的事件处理程序,然后隐藏div,并设置$超时半秒以再次显示div。如果它再次收到事件,它会重置超时。

与我刚刚使用jQuery相比,我认为这相当复杂。但在一天结束时,你可能会获得更好的表现。总而言之,纯粹与Angular一起破解的难度更大。好问题!