एक निर्देश को परिभाषित करते समय 'नियंत्रक', 'लिंक' और 'संकलन' कार्यों के बीच अंतर

Question

कुछ स्थान निर्देशात्मक तर्क के लिए नियंत्रक फ़ंक्शन का उपयोग करते हैं और अन्य लिंक का उपयोग करते हैं। कोणीय मुखपृष्ठ पर टैब उदाहरण एक के लिए नियंत्रक और दूसरे निर्देश के लिए लिंक का उपयोग करता है। दोनों के बीच क्या अंतर है?

Comments

शायद निर्देशात्मक कार्यों का अधिक व्यापक अवलोकन: कोणीय निर्देश - जब संकलन, नियंत्रक, पूर्व-लिंक और पोस्ट-लिंक का उपयोग करना हो ।

— इज़्हाकी

Answer 1

मैं आपके प्रश्न का थोड़ा विस्तार करने जा रहा हूं और संकलन फ़ंक्शन भी शामिल कर रहा हूं।

• संकलित कार्य - टेम्पलेट डोम हेरफेर के लिए उपयोग (यानी, tElement = टेम्पलेट तत्व का हेरफेर), इसलिए जोड़तोड़ जो निर्देश के साथ जुड़े टेम्पलेट के सभी डोम क्लोन पर लागू होते हैं। (यदि आपको एक लिंक फ़ंक्शन (या प्री और पोस्ट लिंक फ़ंक्शंस) की आवश्यकता है, और आपने एक कंपाइल फ़ंक्शन को परिभाषित किया है, तो कंपाइल फ़ंक्शन को लिंक फ़ंक्शन (एस) को वापस करना होगा क्योंकि विशेषता को परिभाषित किए जाने पर 'link'विशेषता को अनदेखा 'compile'किया गया है।)

• लिंक फंक्शन - सामान्य रूप से श्रोता कॉलबैक (यानी, $watchस्कोप पर भाव) दर्ज करने के साथ-साथ DOM (यानी, iElement = व्यक्तिगत उदाहरण तत्व का हेरफेर) अपडेट करने के लिए उपयोग करते हैं। टेम्पलेट के क्लोन होने के बाद इसे निष्पादित किया जाता है। जैसे, एक के अंदर <li ng-repeat...>, लिंक फ़ंक्शन को <li>उस विशेष <li>तत्व के लिए टेम्प्लेट (tElement) के बाद क्लोन किया गया है (iElement में) । एक $watchनिर्देश को गुंजाइश संपत्ति परिवर्तन (एक उदाहरण प्रत्येक उदाहरण के साथ जुड़ा हुआ है) को अधिसूचित करने की अनुमति देता है, जो निर्देश को DOM के लिए एक अद्यतन उदाहरण मूल्य प्रदान करने की अनुमति देता है।

• नियंत्रक फ़ंक्शन - का उपयोग तब किया जाना चाहिए जब किसी अन्य निर्देश को इस निर्देश के साथ सहभागिता करने की आवश्यकता हो। उदाहरण के लिए, AngularJS के मुख पृष्ठ पर, फलक निर्देश को टैब निर्देश द्वारा बनाए गए दायरे में स्वयं को जोड़ना होगा, इसलिए टैब निर्देश को नियंत्रक विधि (थिंक एपीआई) को परिभाषित करने की आवश्यकता होती है जिसे फलक निर्देश कॉल या एक्सेस कर सकता है।
  
  टैब और फलक निर्देशों की अधिक गहराई से व्याख्या के लिए, और टैब निर्देश अपने नियंत्रक पर एक फ़ंक्शन का उपयोग करके this(इसके बजाय $scope) पर एक फ़ंक्शन बनाता है , कृपया AngularJS नियंत्रकों में 'इस' बनाम $ गुंजाइश देखें ।

सामान्य तौर पर, आप $watchesनिर्देशों के नियंत्रक या लिंक फ़ंक्शन में विधियों आदि को डाल सकते हैं । नियंत्रक पहले चलेगा, जो कभी-कभी मायने रखता है (यह फ़िडल देखें जो तब लॉग करता है जब सीटीटीएल और लिंक फ़ंक्शन दो नेस्टेड निर्देशों के साथ चलते हैं)। जैसा कि जोश ने एक टिप्पणी में उल्लेख किया है , आप बाकी ढांचे के साथ स्थिरता के लिए एक नियंत्रक के अंदर गुंजाइश-हेरफेर कार्यों को रखना चाह सकते हैं।

Comments

यह स्पष्टीकरण मुख्य कोणीयजेएस डॉक्स या कम से कम इसका संदर्भ होना चाहिए

— डॉगोकू

यह एक सूचनात्मक उत्तर है लेकिन मुझे लगता है कि इसे पढ़ना मुश्किल है। शायद अधिक विराम चिह्न और छोटे वाक्य मदद कर सकते हैं। कुल मिलाकर मैं जवाब के लिए आभारी हूं।

— मार्टी कॉर्टेज़

$ संकलक 'संकलन' विशेषता की उपस्थिति में 'लिंक' विशेषता को अनदेखा करता है। लेकिन 'नियंत्रक' विशेषता की उपस्थिति के बारे में क्या? क्या 'कंट्रोलर' $ कंपाइलर को 'लिंक' और 'कंपाइल' दोनों विशेषताओं को अनदेखा करने का कारण बनता है? क्या एक 'नियंत्रक' के साथ मिलकर 'संकलन' का उपयोग करना संभव और / या उचित है?

— कार्ल जी।

@CarlG, लिंक और संकलन के संबंध में $ संकलक पर नियंत्रक विशेषता की उपस्थिति का कोई प्रभाव नहीं है। आप संकलन और नियंत्रक का उपयोग कर सकते हैं।

— मार्क राजकोक

"डोम श्रोताओं" नहीं हैं "(यानी, गुंजाइश पर $ घड़ी अभिव्यक्ति)"। एक DOM जैसी घटनाओं के लिए सुनता है mouseover, दूसरा संपत्ति में बदलाव की गुंजाइश के लिए। बड़ा अंतर।

— दिमित्री जैतसेव

Answer 2

मार्क के जवाब के पूरक के रूप में, संकलन फ़ंक्शन में स्कोप तक पहुंच नहीं है, लेकिन लिंक फ़ंक्शन करता है।

मैं वास्तव में इस वीडियो की सिफारिश करता हूं; मिसको हेवरी (एंगुलरजेएस के पिता) द्वारा निर्देश लेखन , जहां वह मतभेदों और कुछ तकनीकों का वर्णन करते हैं। ( वीडियो में 14:41 निशान पर संकलन समारोह और लिंक फ़ंक्शन के बीच अंतर )।

Comments

वीडियो के लिंक के लिए +1। यह बहुत जानकारीपूर्ण है।

— रोब Kielty

jvandemo.com/…

— EMuentes

Answer 3

1. संकलन से पहले कोड चलाना: नियंत्रक का उपयोग करें
2. संकलन के बाद कोड चलाना: लिंक का उपयोग करें

कोणीय सम्मेलन: नियंत्रक में व्यापार तर्क और लिंक में डोम हेरफेर लिखें।

इसके अलावा आप एक नियंत्रक फ़ंक्शन को दूसरे निर्देश के लिंक फ़ंक्शन से कॉल कर सकते हैं। उदाहरण के लिए आपके पास 3 कस्टम निर्देश हैं

<animal>
<panther>
<leopard></leopard>
</panther> 
</animal>

और आप "तेंदुए" के निर्देश के अंदर से जानवर तक पहुंचना चाहते हैं।

http://egghead.io/lessons/angularjs-directive-communic अंतर-डायरेक्टिव संचार के बारे में जानने के लिए उपयोगी होगा

Comments

"संकलन से पहले चल रहा कोड: नियंत्रक का उपयोग करें"। यह गलत है; compileहमेशा पहले निष्पादित किया जाएगा controller।

— इजाकी

आप (कम से कम सीधे तरीके से नहीं) अपने तेंदुए के निर्देश से जानवर तक पहुंचने में सक्षम नहीं होंगे। माता-पिता के निर्देश में बाल निर्देशक नियंत्रक विधियों का उपयोग कर सकते हैं, लेकिन भाई के निर्देशों (जैसे ऊपर के उदाहरण में) एक दूसरे के नियंत्रक को नहीं बुला सकते हैं।

— बेंजामिन व्हाइट

क्या तेंदुए वास्तव में एक प्रकार के पैंथर होते हैं? इसके अलावा, एक साइड नोट पर ... क्या आपके पास एक निर्देश में एक - और - एक नियंत्रक हो सकता है?

— कोड़ी

हाँ तेंदुआ / जगुआर पैंथर हैं। और हां आपके पास निर्देश के भीतर लिंक और नियंत्रक है।

— राहुल

कोणीय डेवलपर गाइड से: "सर्वश्रेष्ठ अभ्यास: नियंत्रक का उपयोग करें जब आप अन्य निर्देशों के लिए एक एपीआई को उजागर करना चाहते हैं। अन्यथा लिंक का उपयोग करें।"

— मार्टिन वैन ड्रेल

Answer 4

संकलन समारोह -

1. नियंत्रक और लिंक फ़ंक्शन से पहले कहा जाता है।
2. संकलित फ़ंक्शन में, आपके पास मूल टेम्प्लेट DOM है जिससे आप AngularJS का एक उदाहरण बनाने से पहले और एक स्कोप बनने से पहले मूल DOM पर परिवर्तन कर सकते हैं
3. एनजी-रिपीट सही उदाहरण है - मूल सिंटैक्स टेम्पलेट तत्व है, HTML में दोहराया तत्व उदाहरण हैं
4. कई तत्व उदाहरण और केवल एक टेम्पलेट तत्व हो सकते हैं
5. अभी तक स्कोप उपलब्ध नहीं है
6. संकलित फ़ंक्शन फ़ंक्शन और ऑब्जेक्ट वापस कर सकता है
7. (पोस्ट-लिंक) फ़ंक्शन को वापस करना - कंपाइल फ़ंक्शन के रिक्त होने पर लिंक ऑब्जेक्ट के लिंक प्रॉपर्टी के माध्यम से लिंकिंग फ़ंक्शन को पंजीकृत करने के बराबर है।
8. पूर्व और बाद के गुणों के माध्यम से पंजीकृत फ़ंक्शन (एस) के साथ एक वस्तु लौटाते हुए - जब लिंकिंग चरण के दौरान एक लिंकिंग फ़ंक्शन को कॉल किया जाना चाहिए, तो आपको नियंत्रित करने की अनुमति मिलती है। नीचे दिए गए पूर्व-लिंकिंग और पोस्ट-लिंकिंग कार्यों के बारे में जानकारी देखें।

वाक्य - विन्यास

function compile(tElement, tAttrs, transclude) { ... }

नियंत्रक

1. संकलन समारोह के बाद बुलाया
2. गुंजाइश यहाँ उपलब्ध है
3. अन्य निर्देशों द्वारा पहुँचा जा सकता है (देखें विशेषता की आवश्यकता है)

पूर्व लिंक

1. DOM श्रोताओं को पंजीकृत करने के साथ-साथ DOM को अपडेट करने के लिए लिंक फ़ंक्शन जिम्मेदार है। टेम्पलेट के क्लोन होने के बाद इसे निष्पादित किया जाता है। यह वह जगह है जहां अधिकांश निर्देशात्मक तर्क डाले जाएंगे।

2. आप कंट्रोलर में डोम को angular.element का उपयोग करके अपडेट कर सकते हैं लेकिन यह अनुशंसित नहीं है क्योंकि लिंक फ़ंक्शन में तत्व प्रदान किया गया है

3. प्री-लिंक फ़ंक्शन का उपयोग तर्क को लागू करने के लिए किया जाता है जो तब चलता है जब कोणीय जेएस ने पहले से ही बाल तत्वों को संकलित किया है, लेकिन इससे पहले कि किसी भी बच्चे के तत्व के पोस्ट लिंक को बुलाया गया हो

बाद लिंक

1. निर्देश है कि केवल लिंक फ़ंक्शन है, कोणीय फ़ंक्शन को पोस्ट लिंक के रूप में मानता है

2. संकलित करने के बाद पोस्ट को निष्पादित किया जाएगा, नियंत्रक और पूर्व-लिंक फ़ंक्स्टन, इसलिए यही आपके निर्देश तर्क को जोड़ने के लिए सबसे सुरक्षित और डिफ़ॉल्ट स्थान माना जाता है