35

मेरे पास कुछ कस्टम निर्देश हैं जो एनीमेशन प्रभावों के लिए jQuery का उपयोग करते हैं (कोणीय के अंतर्निहित ngShow/ngHide और जैसे कार्यात्मक हैं, लेकिन सुंदर नहीं हैं)। मुझे लगता है कि मुझे कहीं भी दस्तावेज़ीकरण में पढ़ना याद है कि कोणीय के अपने डीओएम चयनकर्ता (angular.export() या angular.select() की तरह कुछ) है कि मुझे $(SELECTOR) के बजाय उपयोग करना चाहिए; हालांकि मुझे अब यह नहीं मिल रहा है।एंगुलरजेएस डोम चयनकर्ता

मैं कुछ इस तरह कर रहा हूँ:

//view 
<div scroll-to="element"> //`element` is set via ng-click 
    … 
</div> 

//directive 
link: function(scope, elm, attrs) 
{ 

    scope.$watch(attrs.scrollTo, function scrollToAction(newValue,oldValue) 
    { 
    if (newValue !== oldValue) 
    { 
     elm.animate({ 
     scrollTop: 
      $('#'+newValue).offset().top //replace jquery selector with angular's 
      - elm.offset().top 
      + elm.scrollTop() 
     }); 
    } 
    }); 

} 

मैं वास्तव में, $('#'+newValue) से छेड़छाड़ कर रहा हूँ इसके बारे में सिर्फ जानकारी को पुन: प्राप्त है, तो मुझे नहीं लगता कि मैं कोणीय के खिलाफ अपराध करने कर रहा हूँ है।

उत्तर

36

"jqLite" (angular.element पृष्ठ पर परिभाषित) की तरह children(), parent(), contents(), find(), next() (लेकिन previous()) डोम ट्रेवर्सल तरीकों प्रदान करता है। कोई चयनकर्ता जैसी विधि नहीं है।

आप जावास्क्रिप्ट के querySelector को आजमा सकते हैं।

+0

+1 मैंने अतिरिक्त जानकारी भी जोड़ दी है जो बता सकती है कि ओपी को लगता है कि उसे एक कोणीय विधि क्यों दिखाई दे रही है जिसमें आप तत्वों का चयन कर सकते हैं। –

+0

आह धन्यवाद, हाँ यह बिल्कुल है। मैं कोणीय से पहले jquery शामिल है, तो 'angular.element()' अभी भी बेहतर है? ऐसा लगता है जैसे यह उपनाम को हल करने के अतिरिक्त ओवरहेड जोड़ देगा। – jacob

+4

@jacob, मैं 'angular.element()' का उपयोग करूंगा ताकि भविष्य में आपके कोड को अब jQuery की आवश्यकता न हो, तो आपको इसे अपडेट नहीं करना होगा। –

38

रूप official AngularJs doc says

कोणीय के सभी तत्व संदर्भ हमेशा साथ jQuery या jqLite (जैसे एक निर्देश का संकलन/लिंक समारोह में तत्व तर्क के रूप में) लिपटे रहे हैं। वे कच्चे डोम संदर्भ कभी नहीं होते हैं।

विवरण में: यदि आप jQuery से पहले अपने कोणीय संदर्भ शामिल हैं, angular.element() समारोह jQuery के लिए एक उपनाम (यह अन्यथा jqLite, मार्क Rajcok का जवाब देखने के है) हो जाता है।


आप देव उपकरण डीबगर में जाँच कर सकते हैं अगर आप लाइन जहां angular.element() फोन पर एक ब्रेकपाइंट रखकर jQuery या jqLite हो रही है। इसे घुमाने पर, आपको प्रासंगिक पुस्तकालय के लिए संकेत दिया जाएगा, नीचे स्क्रीनशॉट देखें (मेरे मामले में, मुझे jQuery मिलती है)।

jQuery for <code>angular.element()</code>


रूप official AngularJs doc says

टैग नाम से खोज के लिए, कोशिश के बजाय angular.element(document).find(...) या $document.find()

दूसरे शब्दों में: जब angular.element() बुला आप jQuery मिलता है, तो angular.element('#foo > bar') जैसे कुछ भी काम करता है यदि आप यही हैं ई सोच रहा हूँ।


आप कैसे jQuery के बिना इस चयनकर्ता सुविधा प्राप्त करने के लिए सोच रहे हैं, तो आप Sizzlejs का उपयोग कर सकते हैं। Sizzle is the selector library that jQuery uses under the hood