AngularJS

Question

के साथ स्क्रॉल पर एक div छुपाएं मैं AngularJS के लिए नया हूं। जब मैं उपयोगकर्ता "बी" पर स्क्रॉल करता हूं तो मैं AngularJS में div "ए" को छिपाना चाहता हूं। वर्तमान में मैं div "ए" को छुपा सकता हूं जब उपयोगकर्ता एनजी-क्लिक का उपयोग करके div "B" पर क्लिक करता है, लेकिन मुझे AngularJS के साथ स्क्रॉल पर ऐसा करने का कोई तरीका नहीं मिला। मुझे पता है, मैं div को छिपाने के लिए JQuery का उपयोग कर सकता हूं लेकिन क्या AngularJS के साथ ऐसा करने का कोई तरीका है?

अद्यतन:

मैं एक स्क्रॉल निर्देश बनाया है और $ खिड़की के साथ यह संलग्न। अगर मैं पूरी खिड़की को स्क्रॉल करता हूं तो 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

मुझे यकीन नहीं है कि आप ऐसा क्यों करना चाहते हैं, लेकिन मैंने जो कुछ भी आपको लगता है उसके साथ मैंने एक जेएसफिल्ड बनाया है।

मैं थोड़ा अपने निर्देश संशोधित:

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/

Here is a version $ पार्स का उपयोग कर के रूप में द्वारा @ganaraj

Answer 2

मैं इस पल के लिए मान लेगा कि आप jQuery का उपयोग नहीं करना चाहते हैं।

निर्देशों का उपयोग करना एक पूर्ण समाधान नहीं होगा जबतक कि आप पूरी तरह से निश्चित नहीं हैं कि आप div j से केवल jqLite फ़ंक्शंस का उपयोग करके div A का संदर्भ प्राप्त कर सकते हैं।

आप क्या कर सकते हैं 2 निर्देश बनाते हैं: div B के लिए "do-hide-on-scroll", और div A. के लिए "get-hidden-on-scroll" इन का उपयोग करके, आप "स्क्रॉल" ईवेंट को पकड़ते हैं div बी पर, और $rootScope.emit का उपयोग करके एक अंगुलर ईवेंट उत्पन्न करने के लिए इसका उपयोग करें, "div B स्क्रॉलिंग" ईवेंट को शीर्ष स्तर के मूल दायरे में भेजने के लिए $rootScope.emit का उपयोग करें। माता-पिता का दायरा, जब यह प्राप्त होता है, तो $rootScope.broadcast अपने सभी बच्चों के स्कॉप्स के समान ही होगा, जिनमें से एक div A. Div A के "get-hidden-on-scroll" निर्देश में एक ईवेंट हैंडलर होगा जो इस घटना के लिए सुनता है, फिर div को छुपाता है, और div को फिर से दिखाने के लिए आधे सेकेंड के लिए $ टाइमआउट सेट करता है। यदि यह घटना को फिर से प्राप्त करता है, तो यह टाइमआउट रीसेट करता है।

यह पूरी तरह से संकलित है, मैं बस jQuery का उपयोग करने की तुलना में सहमत हूं। लेकिन दिन के अंत में, आप शायद बेहतर प्रदर्शन कर रहे हैं। सब कुछ, कोणीय के साथ पूरी तरह से दरार करने के लिए कठिन पागल में से एक। अच्छा प्रश्न!