दिलचस्प पोस्ट
एकाधिक बटन 'OnClickListener () एंड्रॉइड मैं asp.net MVC में सत्र स्थिति कैसे अक्षम कर सकता हूँ? अजगर का उपयोग करने के लिए स्ट्रिंग को कन्वर्ट करने के लिए JSON कॉलम "चयन सूची में अमान्य है क्योंकि यह एक समग्र फ़ंक्शन या ग्रुप बाय खंड में निहित नहीं है" "टेबल से बनाम" बनाम "चयन करें कोला, कोलाब आदि तालिका से" चुनें, SQL सर्वर 2005 में दिलचस्प व्यवहार क्वेरी के बिना PHP और श्रेणियों और उप श्रेणियों के लिए वृक्ष संरचना सरणी संरचना के साथ सरणी के लिए स्ट्रिंग ResultSet के साथ java.util.stream क्या यह सार्वजनिक करने के लिए Firebase apiKey को उजागर करने के लिए सुरक्षित है? कैसे एक सही MySQL कनेक्शन स्ट्रिंग बनाने के लिए? क्या पायथन को मशीन कोड में संकलन करना संभव है? UITextView के अंदर UIScrollView AutoLayout के साथ कुंजीकोड और चारकोड पायथन में RPC करने के लिए वर्तमान विकल्प क्या है? एंड्रॉइड एडीबी, रन-एज का उपयोग करके डेटाबेस पुनः प्राप्त करें

कोणीय निर्देश – कब और किस प्रकार कम्पाइल, नियंत्रक, प्री-लिंक और पोस्ट-लिंक का इस्तेमाल किया जाता है

जब कोई कोणीय निर्देश लिखता है, तो कोई भी निम्नलिखित कार्यों को डीओएम व्यवहार, सामग्री में हेरफेर करने और उस तत्व को देखने का उपयोग कर सकता है जिस पर निर्देश को घोषित किया गया है:

  • संकलन
  • नियंत्रक
  • पूर्व लिंक
  • बाद लिंक

ऐसा कुछ भ्रम हो रहा है जिसके लिए फ़ंक्शन किसी का उपयोग करना चाहिए। इस प्रश्न में शामिल हैं:

निर्देशक मूल बातें

  • कैसे विभिन्न कार्यों को घोषित करने के लिए?
  • स्रोत टेम्पलेट और एक इंस्टेंस टेम्पलेट के बीच अंतर क्या है?
  • किस क्रम में निर्देश कार्य निष्पादित होते हैं?
  • इन फ़ंक्शन कॉल के बीच क्या और क्या होता है?

समारोह प्रकृति, करो और न करें

  • संकलित करें
  • नियंत्रक
  • पूर्व लिंक
  • पोस्ट-लिंक

संबंधित सवाल:

  • निर्देशक: लिंक बनाम बनाम नियंत्रक बनाम
  • 'नियंत्रक', 'लिंक' और 'संकलन' फ़ंक्शन के बीच अंतर, जब कोणीय निर्देशक परिभाषित करते हैं ।
  • कोणीय कलेक्शन में कम्पाइल और लिंक फंक्शन में अंतर क्या है
  • AngularJS निर्देशों में प्री-कंपाइल और पोस्ट-कंपाइल तत्व के बीच का अंतर? ।
  • कोणीय जेएस निर्देशक – टेम्पलेट, संकलन या लिंक? ।
  • एन्जलर जेएस निर्देशों में पोस्ट लिंक बनाम पूर्व लिंक

वेब के समाधान से एकत्रित समाधान "कोणीय निर्देश – कब और किस प्रकार कम्पाइल, नियंत्रक, प्री-लिंक और पोस्ट-लिंक का इस्तेमाल किया जाता है"

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

एक एकल निर्देश के लिए

निम्न बल के आधार पर, निम्नलिखित HTML मार्कअप पर विचार करें:

<body> <div log='some-div'></div> </body> 

निम्नलिखित निर्देशों के साथ घोषणा:

 myApp.directive('log', function() { return { controller: function( $scope, $element, $attrs, $transclude ) { console.log( $attrs.log + ' (controller)' ); }, compile: function compile( tElement, tAttributes ) { console.log( tAttributes.log + ' (compile)' ); return { pre: function preLink( scope, element, attributes ) { console.log( attributes.log + ' (pre-link)' ); }, post: function postLink( scope, element, attributes ) { console.log( attributes.log + ' (post-link)' ); } }; } }; }); 

कंसोल आउटपुट होगा:

 some-div (compile) some-div (controller) some-div (pre-link) some-div (post-link) 

हम देख सकते हैं कि compile को पहले क्रियान्वित किया जाता है, फिर controller , तब pre-link और अंतिम post-link

नेस्टेड निर्देशों के लिए

नोट: निम्नलिखित निर्देशों पर लागू नहीं होता है जो अपने बच्चों को उनके लिंक फ़ंक्शन में प्रस्तुत करते हैं। काफी कुछ कांच संबंधी निर्देश ऐसा करते हैं (जैसे एनजीआईफ़, एनजीआरपीएट, या किसी अन्य दिशा-निर्देश के साथ) इन निर्देशों को मूल रूप से अपने link फ़ंक्शन के नाम से संबोधित किया जाता है इससे पहले कि उनके बच्चे के निर्देशों को compile जाता है।

मूल HTML मार्कअप अक्सर नेस्टेड तत्वों से बना है, प्रत्येक के अपने निर्देशों के साथ। निम्न मार्कअप की तरह (देखें plunk देखें):

 <body> <div log='parent'> <div log='..first-child'></div> <div log='..second-child'></div> </div> </body> 

कंसोल आउटपुट इस तरह दिखेगा:

 // The compile phase parent (compile) ..first-child (compile) ..second-child (compile) // The link phase parent (controller) parent (pre-link) ..first-child (controller) ..first-child (pre-link) ..first-child (post-link) ..second-child (controller) ..second-child (pre-link) ..second-child (post-link) parent (post-link) 

हम यहां दो चरणों को भेद कर सकते हैं – संकलन चरण और लिंक चरण।

संकलन चरण

जब डोम लोड किया जाता है, तो कोनेबल संकलन चरण शुरू होता है, जहां यह शीर्ष-नीचे मार्कअप को पार करता है, और सभी निर्देशों पर compile कॉल करता है। ग्राफ़िक रूप से, हम इसे इसी तरह व्यक्त कर सकते हैं:

बच्चों के लिए संकलन पाश को चित्रित करते हुए एक चित्र

यह उल्लेख करना शायद महत्वपूर्ण है कि इस स्तर पर, संकलन समारोह में टेम्पलेट्स टेम्पलेट्स (उदाहरण के लिए टेम्पलेट) हैं।

लिंक चरण

DOM उदाहरण अक्सर प्रायः स्रोत टेम्पलेट का परिणाम डोम में प्रदान किया जाता है, लेकिन वे ng-repeat के द्वारा या मक्खी पर पेश किए जा सकते हैं।

जब भी एक तत्व के एक नए उदाहरण के साथ DOM को निर्देशित किया जाता है, तब लिंक चरण शुरू होता है।

इस चरण में, कोणीय कॉल controller , pre-link , बच्चों को पुनरावृत्त करता है, और सभी निर्देशों पर post-link को कॉल करता है, जैसे:

लिंक चरण चरणों का प्रदर्शन करने वाला एक उदाहरण

इन फ़ंक्शन कॉल के बीच क्या और क्या होता है?

विभिन्न डायरेक्टिव फ़ंक्शंस को दो अन्य कोनाल फ़ंक्शंस के भीतर से निष्पादित किया जाता है जिसे $compile कहा जाता है (जहां निर्देश की compile निष्पादित किया जाता है) और एक आंतरिक फ़ंक्शन जिसे nodeLinkFn कहा जाता है (जहां निर्देशक के controller , preLink और postLink निष्पादित होते हैं)। डायरेक्टिव फ़ंक्शन्स से पहले और बाद में कोयोलर फ़ंक्शन के अंदर कई चीजें होती हैं। शायद सबसे महत्वपूर्ण बच्चा पुनरावृत्ति है निम्नलिखित सरल चित्रण संकलन और लिंक चरणों में प्रमुख कदम दिखाता है:

काल्पनिक संकलन और लिंक चरणों दिखा एक उदाहरण

इन चरणों का प्रदर्शन करने के लिए, निम्न HTML मार्कअप का उपयोग करें:

 <div ng-repeat="i in [0,1,2]"> <my-element> <div>Inner content</div> </my-element> </div> 

निम्नलिखित निर्देशों के साथ:

 myApp.directive( 'myElement', function() { return { restrict: 'EA', transclude: true, template: '<div>{{label}}<div ng-transclude></div></div>' } }); 

संकलित करें

compile एपीआई इस तरह दिखता है:

 compile: function compile( tElement, tAttributes ) { ... } 

प्रायः पैरामीटर्स तत्वों को दर्शाने के लिए t साथ प्रीफ़िक्स्ड हैं और प्रदान किए गए विशेषताओं उदाहरण के बजाय, स्रोत टेम्पलेट के हैं।

ट्रांससाइंड सामग्री (यदि कोई हो) compile करने के लिए कॉल से पहले हटा दिया जाता है, और टेम्पलेट मार्कअप पर लागू होता है इस प्रकार, compile फ़ंक्शन को प्रदान किया गया तत्व ऐसा दिखेगा:

 <my-element> <div> "{{label}}" <div ng-transclude></div> </div> </my-element> 

ध्यान दें कि इस स्थान पर अंतःस्थापित सामग्री फिर से डाली नहीं गई है

डायरेक्टिव के .compile को कॉल करने के बाद, कोणीय उन सभी बच्चे तत्वों को पार कर जाएगा, जिनके साथ ही डायरेक्टिव्ही (उदाहरण के लिए टेम्पलेट एलीमेंट्स) द्वारा पेश किए गए हैं।

घटना सृजन

हमारे मामले में, उपर्युक्त स्रोत टेम्पलेट के तीन उदाहरण बनाए जाएंगे ( ng-repeat द्वारा) इस प्रकार, निम्नलिखित अनुक्रम तीन बार निष्पादित होगा, एक बार प्रति उदाहरण।

नियंत्रक

controller एपीआई शामिल है:

 controller: function( $scope, $element, $attrs, $transclude ) { ... } 

लिंक चरण में प्रवेश कर रहा है, $compile माध्यम से लौटाया गया लिंक फ़ंक्शन अब एक दायरे के साथ प्रदान किया गया है।

सबसे पहले, लिंक फ़ंक्शन एक बच्चा गुंजाइश ( scope: true ) या पृथक गुंजाइश ( scope: {...} ) अगर अनुरोध किया गया है।

नियंत्रक को निष्पादित किया जाता है, उदाहरण के तत्व के दायरे के साथ प्रदान किया जाता है।

पूर्व लिंक

pre-link एपीआई ऐसा दिखता है:

 function preLink( scope, element, attributes, controller ) { ... } 

निदेशालय के लिए कॉल के बीच वस्तुतः कुछ भी नहीं होता है। .controller और .preLink फ़ंक्शन कोणीय अभी भी सुझाए गए हैं कि कैसे प्रत्येक का उपयोग किया जाना चाहिए।

.preLink कॉल के बाद, लिंक फ़ंक्शन प्रत्येक बच्चे तत्व को पार करेगा – सही लिंक फ़ंक्शन को बुलाता है और इसे वर्तमान गुंजाइश (जो कि बाल तत्वों के लिए अभिभावक क्षेत्र के रूप में कार्य करता है) से संलग्न है।

पोस्ट-लिंक

post-link एपीआई pre-link फ़ंक्शन के समान है:

 function postLink( scope, element, attributes, controller ) { ... } 

शायद यह देखने के लायक है कि एक बार निर्देश के। .postLink फ़ंक्शन को कहा जाता है, अपने बच्चों के सभी तत्वों की लिंक प्रक्रिया पूरी हो चुकी है, जिसमें सभी बच्चों के। .postLink फ़ंक्शन शामिल हैं।

इसका मतलब यह है कि जब तक। .postLink कहा जाता है, बच्चे 'लाइव' तैयार हैं। यह भी शामिल है:

  • अनिवार्य तथ्य
  • समापन लागू
  • गुंजाइश संलग्न

इस स्तर पर टेम्पलेट इस तरह दिखेंगे:

 <my-element> <div class="ng-binding"> "{{label}}" <div ng-transclude> <div class="ng-scope">Inner content</div> </div> </div> </my-element> 

कैसे विभिन्न कार्यों को घोषित करने के लिए?

संकलन, नियंत्रक, प्री-लिंक और पोस्ट-लिंक

यदि कोई सभी चार फ़ंक्शन उपयोग करना है, तो निर्देश इस रूप का अनुसरण करेगा:

 myApp.directive( 'myDirective', function () { return { restrict: 'EA', controller: function( $scope, $element, $attrs, $transclude ) { // Controller code goes here. }, compile: function compile( tElement, tAttributes, transcludeFn ) { // Compile code goes here. return { pre: function preLink( scope, element, attributes, controller, transcludeFn ) { // Pre-link code goes here }, post: function postLink( scope, element, attributes, controller, transcludeFn ) { // Post-link code goes here } }; } }; }); 

सूचना है कि संकलन को एक वस्तु देता है जिसमें पूर्व-लिंक और पोस्ट-लिंक फ़ंक्शंस होते हैं; कांगारू भाषा में हम कहते हैं कि कंपाइल फ़ंक्शन एक टेम्पलेट फ़ंक्शन देता है।

संकलन, नियंत्रक और पोस्ट-लिंक

यदि pre-link आवश्यक नहीं है, तो कम्पाइल फ़ंक्शन किसी परिभाषा वस्तु के बजाय पोस्ट लिंक फ़ंक्शन को वापस कर सकता है, जैसे:

 myApp.directive( 'myDirective', function () { return { restrict: 'EA', controller: function( $scope, $element, $attrs, $transclude ) { // Controller code goes here. }, compile: function compile( tElement, tAttributes, transcludeFn ) { // Compile code goes here. return function postLink( scope, element, attributes, controller, transcludeFn ) { // Post-link code goes here }; } }; }); 

कभी-कभी, ( compile विधि के बाद एक compile विधि जोड़ना चाहती है, (पोस्ट) link विधि परिभाषित किया गया था। इसके लिए, एक का उपयोग कर सकते हैं:

 myApp.directive( 'myDirective', function () { return { restrict: 'EA', controller: function( $scope, $element, $attrs, $transclude ) { // Controller code goes here. }, compile: function compile( tElement, tAttributes, transcludeFn ) { // Compile code goes here. return this.link; }, link: function( scope, element, attributes, controller, transcludeFn ) { // Post-link code goes here } }; }); 

नियंत्रक और पोस्ट-लिंक

यदि कोई भी संकलन फ़ंक्शन की आवश्यकता नहीं है, तो इसकी घोषणा पूरी तरह से छोड़ सकती है और निदेशालय के कॉन्फ़िगरेशन ऑब्जेक्ट की link प्रॉपर्टी के अंतर्गत पोस्ट-लिंक फ़ंक्शन प्रदान किया जा सकता है:

 myApp.directive( 'myDirective', function () { return { restrict: 'EA', controller: function( $scope, $element, $attrs, $transclude ) { // Controller code goes here. }, link: function postLink( scope, element, attributes, controller, transcludeFn ) { // Post-link code goes here }, }; }); 

कोई नियंत्रक नहीं

ऊपर दिए गए किसी भी उदाहरण में, यदि कोई ज़रूरत नहीं है तो कोई भी controller समारोह को हटा सकता है। इसलिए उदाहरण के लिए, यदि केवल post-link फ़ंक्शन की आवश्यकता है, तो इसका उपयोग कर सकते हैं:

 myApp.directive( 'myDirective', function () { return { restrict: 'EA', link: function postLink( scope, element, attributes, controller, transcludeFn ) { // Post-link code goes here }, }; }); 

स्रोत टेम्पलेट और एक इंस्टेंस टेम्पलेट के बीच अंतर क्या है?

तथ्य यह है कि कोणीय की अनुमति देता है डोम हेरफेर का मतलब है कि संकलन प्रक्रिया में इनपुट मार्कअप कभी-कभी आउटपुट से भिन्न होती है। विशेष रूप से, कुछ इनपुट मार्कअप को डीओएम को प्रस्तुत करने से पहले कुछ बार क्लोन किया जाता है (जैसे ng-repeat )।

कोणीय शब्दावली थोड़ा असंगत है, लेकिन यह अभी भी दो प्रकार के मार्कअप के बीच अंतर करता है:

  • स्रोत टेम्प्लेट – यदि आवश्यक हो तो मार्कअप को क्लोन किया जाए अगर क्लोन किया गया है, तो यह मार्कअप DOM को प्रदान नहीं किया जाएगा।
  • इंस्टेंस टेम्प्लेट – वास्तविक मार्कअप को DOM के लिए प्रदान किया जाना चाहिए। यदि क्लोनिंग शामिल है, प्रत्येक उदाहरण एक क्लोन होगा

निम्न मार्कअप यह दर्शाता है:

 <div ng-repeat="i in [0,1,2]"> <my-directive>{{i}}</my-directive> </div> 

स्रोत html परिभाषित करता है

  <my-directive>{{i}}</my-directive> 

जो स्रोत टेम्पलेट के रूप में कार्य करता है।

लेकिन यह ng-repeat निर्देश के भीतर लिपटे जाने पर, यह स्रोत टेम्पलेट क्लोन किया जाएगा (हमारे मामले में 3 गुना)। ये क्लोन उदाहरण टेम्प्लेट हैं, प्रत्येक डोम में दिखाई देंगे और प्रासंगिक क्षेत्र तक ही सीमित होंगे।

फ़ंक्शन को संकलित करें

प्रत्येक निर्देश के compile फ़ंक्शन को केवल एक बार कहा जाता है, जब कोणीय बूटस्ट्रैप।

आधिकारिक रूप से, यह (स्रोत) टेम्पलेट जोड़तोड़ करने का स्थान है, जिसमें गुंजाइश या डेटा बाइंडिंग शामिल नहीं है।

मुख्यतः, यह अनुकूलन उद्देश्यों के लिए किया जाता है; निम्नलिखित मार्कअप पर विचार करें:

 <tr ng-repeat="raw in raws"> <my-raw></my-raw> </tr> 

<my-raw> निर्देश DOM मार्कअप का एक विशिष्ट सेट प्रदान करेगा तो हम या तो कर सकते हैं:

  • स्रोत टेम्पलेट ( <my-raw> ) को डुप्लिकेट करने के लिए ng-repeat अनुमति दें, और फिर प्रत्येक इंस्टेंस टेम्पलेट के मार्कअप को संशोधित करें ( compile फ़ंक्शन के बाहर)।
  • वांछित मार्कअप ( compile फ़ंक्शन में) को शामिल करने के लिए स्रोत टेम्पलेट को संशोधित करें, और उसके बाद ng-repeat इसे डुप्लिकेट करने दें।

यदि raws संग्रह में 1000 आइटम हैं, तो बाद वाला विकल्प पहले से ज्यादा तेज हो सकता है।

कर:

  • मार्कअप में हेरफेर करें ताकि यह उदाहरण (क्लोन) के लिए एक टेम्पलेट के रूप में कार्य करता हो।

ऐसा न करें

  • ईवेंट हैंडलर संलग्न करें
  • बाल तत्वों का निरीक्षण करें
  • विशेषताओं पर अवलोकन सेट करें
  • दायरे पर घड़ियों को सेट करें

पोस्ट-लिंक फ़ंक्शन

जब post-link फ़ंक्शन को बुलाया जाता है, तो सभी पिछला कदम उठाए गए हैं – बाध्यकारी, निष्कर्ष आदि।

यह आमतौर पर प्रदान की गई डोम को हेरफेर करने का स्थान है।

कर:

  • DOM (गाया, और इस तरह instantiated) तत्वों हेरफेर।
  • ईवेंट हैंडलर संलग्न करें
  • बाल तत्वों का निरीक्षण करें
  • विशेषताओं पर अवलोकन सेट करें
  • दायरे पर घड़ियों को सेट करें

नियंत्रक फ़ंक्शन

प्रत्येक निर्देश के controller समारोह को तब भी कहा जाता है जब एक नया संबंधित तत्व तत्काल होता है।

आधिकारिक तौर पर controller कार्य है जहां एक:

  • नियंत्रक तर्क परिभाषित करता है (विधियां) जो नियंत्रकों के बीच साझा की जा सकती हैं
  • दायरे चर को आरंभ

फिर, यह याद रखना महत्वपूर्ण है कि यदि निदेशालय में पृथक गुंजाइश शामिल है, तो उसमें कोई गुण जो कि माता-पिता के क्षेत्र से प्राप्त होता है, अभी तक उपलब्ध नहीं है।

कर:

  • नियंत्रक तर्क को परिभाषित करें
  • स्कोप वैरिएबल आरंभ करें

ऐसा न करें:

  • बाल तत्वों का निरीक्षण करें (वे अभी तक प्रस्तुत नहीं किए जा सकते हैं, दायरे से बंधे हैं, आदि)।

प्री-लिंक फंक्शन

प्रत्येक निर्देश के pre-link फ़ंक्शन को तब भी कहा जाता है जब एक नया संबंधित तत्व तत्काल होता है।

जैसा कि संकलन क्रम अनुभाग में पहले देखा गया है, pre-link फ़ंक्शंस को माता-पिता-बच्चे कहते हैं, जबकि post-link फ़ंक्शन को child-then-parent

pre-link फ़ंक्शन शायद ही कभी प्रयोग किया जाता है, लेकिन विशेष परिदृश्यों में उपयोगी हो सकता है; उदाहरण के लिए, जब कोई बच्चा नियंत्रक खुद को माता-पिता के नियंत्रक के साथ पंजीकृत करता है, लेकिन पंजीकरण parent-then-child फैशन में होना चाहिए ( ngModelController इस तरह से काम करता है)

ऐसा न करें:

  • बाल तत्वों का निरीक्षण करें (वे अभी तक प्रस्तुत नहीं किए जा सकते हैं, दायरे से बंधे हैं, आदि)।