कोणीय जेएस: निर्देश के लिंक फ़ंक्शन की क्या आवश्यकता है जब हमारे पास पहले से ही गुंजाइश के साथ निर्देशक के नियंत्रक थे?

Question

मुझे गुंजाइश और टेम्पलेट पर कुछ ऑपरेशन करने की आवश्यकता है। ऐसा लगता है कि मैं या तो linkफ़ंक्शन या फ़ंक्शन में कर सकता हूं controller(चूंकि दोनों की गुंजाइश है)।

जब मुझे linkफंक्शन का उपयोग करना है और नियंत्रक नहीं है तो ऐसा क्या है?

angular.module('myApp').directive('abc', function($timeout) {
    return {
        restrict: 'EA',
        replace: true,
        transclude: true,
        scope: true,
        link: function(scope, elem, attr) { /* link function */ },
        controller: function($scope, $element) { /* controller function */ }
    };
}

इसके अलावा, मैं समझता हूं कि linkयह गैर-कोणीय दुनिया है। तो, मैं उपयोग कर सकते हैं $watch, $digestऔर $apply।

linkफ़ंक्शन का महत्व क्या है , जब हमारे पास पहले से ही नियंत्रक था?

Comments

आप से क्या मतलब है " इसके अलावा, मैं समझता हूँ कि लिंक गैर कोणीय दुनिया। तो, मैं उपयोग कर सकते हैं $watch, $digestऔर $apply। "?

— संगीत से

अंदर linkहमें कोई कोणीय जादू दिखाई नहीं देता है। यानी कोई 2 तरह से बाँधना, आदि बस इतना है कि हमारे पास कोणीय का उपयोग करने के लिए उपलब्ध है।

— युगल जिंदल

Answer 1

कार्यों और कार्यों के बारे में मेरे शुरुआती संघर्ष linkऔर controllerउनके बारे में काफी कुछ पढ़ने के बाद, मुझे लगता है कि अब मेरे पास इसका जवाब है।

पहले समझने देता है ,

कैसे कोणीय निर्देश संक्षेप में काम करते हैं:

• हम एक टेम्पलेट के साथ शुरू करते हैं (एक स्ट्रिंग के रूप में या एक स्ट्रिंग को लोड किया जाता है)

  var templateString = '<div my-directive>{{5 + 10}}</div>';

• अब, यह templateStringएक कोणीय तत्व के रूप में लिपटा है

  var el = angular.element(templateString);

• साथ el, अब हम यह संकलन के साथ $compileवापस पाने के लिए कड़ी कार्य करते हैं।

  var l = $compile(el)

  यहाँ क्या होता है,

  • $compile पूरे टेम्पलेट के माध्यम से चलता है और सभी निर्देशों को इकट्ठा करता है जो इसे पहचानता है।
  • खोजे गए सभी निर्देशों को पुनरावर्ती संकलित किया जाता है और उनके linkकार्यों को एकत्र किया जाता है।
  • फिर, सभी linkफ़ंक्शन एक नए linkफ़ंक्शन में लिपटे हुए हैं और वापस आ गए हैं l।

• अंत में, हम scopeइस l(लिंक) फ़ंक्शन को फ़ंक्शन प्रदान करते हैं जो आगे इस scopeऔर उनके संबंधित तत्वों के साथ लिपटे लिंक फ़ंक्शन को निष्पादित करता है ।

  l(scope)

• यह templateएक नई नोड के रूप में जोड़ता है DOMऔर आह्वान करता है controllerजो अपनी घड़ियों को उस दायरे में जोड़ता है जिसे DOM में टेम्पलेट के साथ साझा किया गया है।

तुलना संकलन बनाम लिंक बनाम नियंत्रक :

• हर निर्देश केवल एक बार संकलित किया जाता है और लिंक फ़ंक्शन को फिर से उपयोग के लिए रखा जाता है। इसलिए, यदि निर्देश के सभी उदाहरणों के लिए कुछ लागू होता है, तो निर्देश के compileकार्य के अंदर प्रदर्शन किया जाना चाहिए ।

• अब, संकलन के बाद हमारे पास linkफंक्शन है जिसे DOM को टेम्पलेट देते समय निष्पादित किया जाता है । इसलिए, इसलिए हम वह सब कुछ करते हैं जो निर्देश के हर उदाहरण के लिए विशिष्ट है। उदाहरण के लिए: घटनाओं को जोड़ना , गुंजाइश के आधार पर टेम्पलेट को बदलना , आदि।

• अंत में, नियंत्रक को लाइव और प्रतिक्रियाशील होने के लिए उपलब्ध होना है, जबकि निर्देश DOM(संलग्न होने के बाद) पर काम करता है । इसलिए:

  (1) लिंक के साथ दृश्य [ V ] (यानी टेम्पलेट) की स्थापना के बाद । एमवीसी में $scopeहमारा [ एम ] है और $controllerहमारा [ सी ] है

  (2) घड़ियों को सेट करके $ गुंजाइश के साथ 2-वे बाइंडिंग का लाभ उठाएं ।

  (3) $scopeघड़ियों को नियंत्रक में जोड़े जाने की उम्मीद है क्योंकि यह वही है जो रन-टाइम के दौरान टेम्पलेट देख रहा है।

  (4) अंत में, controllerइसका उपयोग संबंधित निर्देशों के बीच संवाद करने में सक्षम होने के लिए भी किया जाता है। ( myTabsउदाहरण के लिए https://docs.angularjs.org/guide/directive में )

  (५) यह सही है कि हम यह सब linkफंक्शन में भी कर सकते हैं, लेकिन इसके बारे में चिंताओं को अलग करना ।

इसलिए, अंत में हमारे पास निम्नलिखित हैं जो सभी टुकड़ों को पूरी तरह से फिट करते हैं:

Comments

मैंने इस लेख को निष्पादन के क्रम को समझने के लिए भी उपयोगी पाया है: AngularJS के निर्देशों के अंदर संकलन और लिंक फंक्शन्स की

— नॉटी

महान व्याख्या। उल्लेख करना चाहेंगे कि लिंक फ़ंक्शन से पहले नियंत्रक को कॉल किया जाता है।

— jsbisht

नियंत्रक को लिंक से पहले निष्पादित किया जाता है

— रॉयि नामिर

यह मुझे सूचित करता है कि स्टैक ओवरफ्लो मांग करता है कि संपादन कम से कम 6 वर्ण हैं, इस प्रकार मुझे इस उत्तर में चलो की वर्तनी को सही करने की अनुमति नहीं है।

— user1886323

Answer 2

नियंत्रकों की आवश्यकता क्यों है

के बीच का अंतर linkऔर controllerजब आप अपने डोम में घोंसला निर्देशों करना चाहते हैं और एकत्रित लोगों को माता-पिता के निर्देश से एपीआई कार्यों का पर्दाफाश खेलने में आता है।

से डॉक्स :

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

आप दो निर्देशों करना चाहते कहो my-formऔर my-text-inputऔर आप चाहते हैं my-text-inputके निर्देश केवल अंदर प्रकट करने के लिए my-formऔर कहीं नहीं।

उस मामले में, तुम कहते हो जाएगा, जबकि निर्देश को परिभाषित my-text-inputहै कि यह आवश्यकता से एक नियंत्रक parentतर्क की आवश्यकता का उपयोग कर, इस तरह डोम तत्व: require: '^myForm'। अब पेरेंट तत्व से नियंत्रक हो जाएगा injectedमें linkचौथा तर्क के रूप में समारोह, निम्नलिखित $scope, element, attributes। आप उस कंट्रोलर पर फ़ंक्शंस कॉल कर सकते हैं और पेरेंट डायरेक्शन के साथ संवाद कर सकते हैं।

इसके अलावा, यदि ऐसा कोई नियंत्रक नहीं मिला है, तो एक त्रुटि उठाई जाएगी।

क्यों लिंक का उपयोग करें

linkअगर कोई controllerइस $scopeपर उपलब्ध है, तो परिभाषित करने के लिए फ़ंक्शन का उपयोग करने की कोई वास्तविक आवश्यकता नहीं है controller। इसके अलावा, दोनों को परिभाषित करते हुए linkऔर controller, किसी को दोनों के आह्वान के क्रम के बारे में सावधान रहने की आवश्यकता है ( controllerइसे पहले निष्पादित किया गया है)।

हालांकि, कोणीय तरीके को ध्यान में रखते हुए , अधिकांश DOM हेरफेर और 2-वे बाइंडिंग का उपयोग $watchersआमतौर पर linkफ़ंक्शन में किया जाता है, जबकि बच्चों के लिए एपीआई और $scopeहेरफेर में किया जाता है controller। यह एक कठिन और तेज़ नियम नहीं है, लेकिन ऐसा करने से कोड अधिक मॉड्यूलर हो जाएगा और चिंताओं को अलग करने में मदद करेगा (नियंत्रक directiveराज्य बनाए रखेगा और linkफ़ंक्शन DOM+ बाहरी बाइंडिंग बनाए रखेगा )।

Comments

एक दम बढ़िया। अब, क्या आप प्रश्न के दूसरे भाग के साथ मेरी मदद कर सकते हैं?

— युगल जिंदल

मेरा मतलब है, चूंकि हमारे पास अस्तित्व में नियंत्रक था जो कि अन्य निर्देशों के साथ संवाद करने के लिए इस्तेमाल किया जा सकता था। तो, क्या जरूरत थी link?

— युगल जिंदल

आपका उत्तर किसी भी तरह से वास्तविक प्रश्न का उत्तर नहीं देता है।

— युगल जिंदल

क्या कोई समस्या है जो हम परिभाषित करते हैं controller? डिफाइनिंग कंट्रोलर से बचने के लिए मैं एक नए फंक्शन का आविष्कार क्यों करना चाहूंगा?

— युगल जिंदल

ऐसा लगता है कि @scalaGirl का लिंक अब काम नहीं कर रहा है

— Minato

Answer 3

controllerसमारोह / वस्तु एक अमूर्त मॉडल-दृश्य-नियंत्रक (MVC) का प्रतिनिधित्व करता है। हालांकि एमवीसी के बारे में लिखना कोई नई बात नहीं है, यह अभी भी कोणीय का सबसे महत्वपूर्ण लाभ है: चिंताओं को छोटे टुकड़ों में विभाजित करें। और वह यह,, इसलिए यदि आप पर प्रतिक्रिया करने के लिए की जरूरत है और कुछ नहीं Modelसे आ रही परिवर्तन सही है व्यक्ति कि काम करने के लिए।ViewController

linkफ़ंक्शन के बारे में कहानी अलग है, यह अलग-अलग दृष्टिकोण से आ रही है फिर एमवीसी। और वास्तव में आवश्यक है, एक बार जब हम एक controller/model/view (टेम्पलेट) की सीमाओं को पार करना चाहते हैं ।

चलो '' उन पैमानों से शुरू होते हैं जो linkफंक्शन में पास होते हैं :

function link(scope, element, attrs) {

• गुंजाइश एक कोणीय गुंजाइश वस्तु है।
• तत्व jqLite- लिपटे तत्व है जो इस निर्देशन से मेल खाता है।
• एट्रस सामान्यीकृत विशेषता नामों और उनके संबंधित मूल्यों के साथ एक वस्तु है।

linkसंदर्भ में रखने के लिए , हमें यह उल्लेख करना चाहिए कि सभी निर्देश इस आरंभीकरण प्रक्रिया के चरणों से गुजर रहे हैं: संकलन , लिंक । ब्रैड ग्रीन और श्याम शेषाद्री पुस्तक एंगुलर जेएस से एक उद्धरण :

संकलित चरण (लिंक की एक बहन, स्पष्ट चित्र प्राप्त करने के लिए यहां उल्लेख करें):

इस चरण में, कोणीय टेम्पलेट में सभी पंजीकृत निर्देशों को पहचानने के लिए DOM चलता है। प्रत्येक निर्देश के लिए, यह फिर निर्देश के नियमों (टेम्पलेट, प्रतिस्थापित, ट्रांसक्लूड, और इसी तरह) के आधार पर DOM को रूपांतरित करता है, और यदि यह मौजूद है तो संकलन फ़ंक्शन को कॉल करता है। परिणाम एक संकलित टेम्पलेट फ़ंक्शन है,

लिंक चरण :

दृश्य को गतिशील बनाने के लिए, कोणीय तब प्रत्येक निर्देश के लिए एक लिंक फ़ंक्शन चलाता है। लिंक फ़ंक्शंस आम तौर पर DOM या मॉडल पर श्रोता बनाता है। ये श्रोता हर समय दृश्य और मॉडल को सिंक में रखते हैं।

इसका उपयोग करने का एक अच्छा उदाहरण linkयहां पाया जा सकता है: कस्टम निर्देश बनाना । उदाहरण देखें: एक निर्देश बनाना जो DOM को मैनिपुलेट करता है, जो पेज में "डेट-टाइम" सम्मिलित करता है, हर सेकंड को रीफ्रेश करता है।

ऊपर उस समृद्ध स्रोत से बस एक बहुत छोटा स्निपेट , डोम के साथ वास्तविक हेरफेर दिखा रहा है। $ टाइमआउट सेवा के लिए झुका हुआ कार्य है, और यह भी मेमोरी लीक से बचने के लिए अपने विध्वंसक कॉल में साफ हो जाता है

.directive('myCurrentTime', function($timeout, dateFilter) {

 function link(scope, element, attrs) {

 ...

 // the not MVC job must be done
 function updateTime() {
   element.text(dateFilter(new Date(), format)); // here we are manipulating the DOM
 }

 function scheduleUpdate() {
   // save the timeoutId for canceling
   timeoutId = $timeout(function() {
     updateTime(); // update DOM
     scheduleUpdate(); // schedule the next update
   }, 1000);
 }

 element.on('$destroy', function() {
   $timeout.cancel(timeoutId);
 });

 ...

Comments

आप की तुलना compilerऔर लगता है link। वे सवाल पूछ रहे हैं कि linkजब हमारे पास पहले से ही क्यों थाcontroller

— युगल जिंदल

मैंने अधिक विवरण में भी नियंत्रक का वर्णन करने के लिए उत्तर बढ़ा दिया है। अब controllerबनाम की अवधारणा linkअधिक स्पष्ट होनी चाहिए ...

— रेडिम कोहलर

मैं उस स्पष्टीकरण के लिए समझौता कर सकता हूं। लेकिन लगता है कि यह वहां धुंधली है। यह बहुत अच्छा होगा अगर कोणीय टीम का कोई व्यक्ति खुद इसके लिए बोल सकता है, यह अनुमान लगाता है कि वे इसे कहाँ जाते हैं - linkया फिर controller।

— युगल जिंदल

यही एकमात्र हिस्सा है जिसे मैं समझना चाहता हूं (जब यह पर्याप्त नहीं है?)। साथ ही, मुझे कोणीय के सभी लाभ मिलते हैं controllerऔर linkयह अपेक्षाकृत बदसूरत है। इसलिए, कोणीय टीम के पास केवल एक विकल्प के बजाय इसका एक अच्छा कारण होना चाहिए।

— युगल जिंदल

प्रश्न: जब नियंत्रक पर्याप्त नहीं है? उत्तर: जब आपको कोणीय अनुभव की आवश्यकता होती है, जैसे कि JQuery प्लगइन का उपयोग करना या दस्तावेज़ में उल्लिखित JQlite सुविधा का उपयोग करना ( docs.angularjs.org/api/ng/function/angular.element:) , तब आपको आवश्यकता होगी लिंक

— Hasteq