AngularJS में jQuery प्लगइन्स को एकीकृत करने का सही तरीका


217

मैं सोच रहा था कि मेरे कोणीय ऐप में jQuery प्लग इन को एकीकृत करने का सही तरीका क्या है। मुझे कई ट्यूटोरियल और स्क्रीन-कास्ट मिले हैं, लेकिन वे एक विशिष्ट प्लगइन के लिए तैयार हैं।

उदाहरण के लिए: http://amitgharat.wordpress.com/2013/02/03/an-approach-to-use-jquery-plugins-with-angularjs/ http://www.youtube.com/watch?v=8ozyXwxzFYs

क्या मुझे ऐसा निर्देश बनाना चाहिए -

App.directive('directiveName', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            $(element).'pluginActivationFunction'(scope.$eval(attrs.directiveName));
        }
    };
}); 

और फिर HTML में स्क्रिप्ट और निर्देश को कॉल करें?

<div directiveName ></div>
<script type="text/javascript" src="pluginName.js"></script>

आगे धन्यवाद


4
हां, सबसे अच्छा तरीका यह है कि आवश्यक jQuery प्लगइन को एक निर्देश के अंदर लपेट दिया जाए, ताकि आपको स्कोप वैरिएबल का लाभ मिल सके और इनिशियलाइज़ेशन / मेथड इनवोकेशन को नियंत्रित किया जा सके।
भास्कर केम्पैयाह

मुझे नहीं पता कि मैं किसी भी परिस्थिति में कैसा महसूस कर रहा हूँ ... इसका बुरा अभ्यास सुना
sksallaj

1
यह $(element).pluginActivationFunction(scope.$eval(attrs.directiveName));उद्धरण के बिना होना चाहिए ।
मैक्सिम जुबेरव

जवाबों:


143

हाँ आप सही हैं। यदि आप jQuery प्लगइन का उपयोग कर रहे हैं, तो कोड को कंट्रोलर में न रखें। इसके बजाय एक निर्देश बनाएं और उस कोड को डालें जिसे आप सामान्य रूप linkसे निर्देश के कार्य के अंदर रखेंगे ।

प्रलेखन में कुछ बिंदु हैं जिन्हें आप देख सकते हैं। आप उन्हें यहां पा सकते हैं:
सामान्य नुकसान

नियंत्रकों का सही ढंग से उपयोग करना

सुनिश्चित करें कि जब आप स्क्रिप्ट को अपने दृश्य में संदर्भित कर रहे हैं, तो आप इसे अंतिम बार संदर्भित करते हैं - कोणीयराज पुस्तकालय, नियंत्रकों, सेवाओं और फिल्टर के बाद संदर्भित किया जाता है।

संपादित करें: उपयोग करने के बजाय $(element), आप angular.element(element)jQuery के साथ AngularJS का उपयोग करते समय उपयोग कर सकते हैं


1
JQuery प्लगइन्स के मापदंडों के बारे में कैसे बताएं जो HTML सामग्री की अनुमति देते हैं? (उदाहरण के लिए अगर मैं ng-clickइस सादे पाठ HTML पैरामीटर के माध्यम से एक निर्देश जोड़ना चाहता हूं )
फ्रैक्टालिस्ट

1
@Fractaliste आप क्या मतलब यकीन नहीं है। क्या आप एक उदाहरण दे सकते हैं?
callmekatootie

क्या आप बता सकते हैं कि वास्तव में सभी $ (तत्व) क्या है। 'pluginActivationFunction' (गुंजाइश। $ eval (attrs.directiveName)); माध्यम ?
गौरव_सोनी

मैं लगभग कुल नौसिखिया हूं। मैंने कई jquery प्लगइन्स का उपयोग करने की कोशिश की और उनमें से कोई भी काम नहीं किया। क्या हमें वास्तव में ऐसा करने की आवश्यकता है? क्या वे केवल कोणीय के साथ काम नहीं कर सकते हैं? यह मेरे लिए बहुत बॉयलर लगता है।
Moebius

स्क्रिप्ट को अंतिम रूप से आने की आवश्यकता क्यों है?
माइक आर

0

मेरे पास 2 परिस्थितियाँ हैं जहाँ निर्देशन और सेवाएं / कारखाने अच्छी तरह से नहीं खेलते हैं।

परिदृश्य यह है कि मेरे पास एक निर्देश है जिसमें किसी सेवा की निर्भरता इंजेक्शन है, और निर्देश से मैं सेवा को एजाक्स कॉल ($ http के साथ) करने के लिए कहता हूं।

अंत में, दोनों मामलों में एनजी-रिपीट बिलकुल भी फाइल नहीं किया, तब भी जब मैंने एरे को एक प्रारंभिक मूल्य दिया।

मैं भी एक नियंत्रक और एक अलग दायरे के साथ एक निर्देश बनाने की कोशिश की

केवल जब मैंने एक नियंत्रक को सब कुछ स्थानांतरित किया और यह जादू की तरह काम किया।

इसके बारे में उदाहरण यहां प्रारंभिक जेकेई प्लगइन (रॉयलस्लाइडर) कोणीय जेएस में दिया गया है

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.