隱藏與AngularJS滾動的div

我是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(); 
      }); 
     }; 
    });

來源

2013-05-02 Ali Hasan Imam

附加滾動事件到窗口的建議，並進行顯示隱藏類和使用納克級與像納克級= {表達

http://jsfiddle.net/Tx7md/

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

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

是的，我知道ng-hide和ng-show。我可以顯示/隱藏它的點擊事件，但我怎樣才能做滾動事件？ @Arcayne – 2013-05-02 09:59:22

我不知道你爲什麼想這樣做，但我創建了一個我認爲你想要的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

來源

2013-05-02 10:54:49

謝謝。這是解決方案。我只是想通了，並沒有看到你的答案。 – 2013-05-02 11:33:37

哦，太棒了，請你把我的答案標記爲正確的，謝謝 – 2013-05-02 12:57:45

@DerekEkins你不應該做範圍[attrs.scroll] = true。（因爲它不適用於像model.name這樣的嵌套對象）相反，「正確」的方式是使用$ parse服務。 – ganaraj 2013-05-02 13:41:23

我會假設你不想使用jQuery。

使用指令不會是一個完整的解決方案，除非您完全確定您只能使用jqLite函數從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一起破解的難度更大。好問題！

來源

2013-05-02 10:51:46

隱藏與AngularJS滾動的div

回答

相關問題