शुरुआती के लिए कोणीय निर्देश। भाग 1

मेरी राय में, निर्देश एंगुलरज की घोषणात्मक शैली का मुख्य आकर्षण हैं। हालाँकि, यदि आप निर्देशों के लिए समर्पित Angularjs के आधिकारिक प्रलेखन के अनुभाग में उपयोगकर्ता टिप्पणियाँ खोलते हैं, तो आप देखेंगे कि उनमें से सबसे लोकप्रिय है : "कृपया दस्तावेज़ को फिर से लिखें, इसे और अधिक सुलभ और संरचित करें। एक नौसिखिया Angularjs डेवलपर के लिए यह पता लगाना कठिन है "(" कृपया निर्देशों के स्पष्ट अच्छी तरह से संरचित प्रलेखन को फिर से लिखें। यह पहली बार कोणीय डेवलपर्स के अनुकूल नहीं है ")। इससे असहमत होना मुश्किल है, प्रलेखन अभी भी नम है और कुछ बिंदुओं पर कार्यात्मक के तर्क और सार को समझने के लिए महान प्रयास करना आवश्यक है। इसलिए, मैं आपको इस अध्याय की मेरी मुफ्त रिटेलिंग इस उम्मीद में देता हूं कि इससे किसी का समय बचेगा, और मैं आपके समर्थन और टिप्पणियों में भाग लेने पर भी भरोसा करता हूं। तो चलिए!

निर्देश कैसे लिखें?

एंगुलरज के निर्देश अन्य मॉड्यूल विन्यास के साथ सेट किए गए हैं:

angular.module('moduleName', []) .directive('directiveName', function () { /*-  */ }) .directive('anotherDirectiveName', function () { /*-  */ }); 

उनकी घोषणा के लिए दो विकल्प हैं। सरल और अधिक शक्तिशाली लंबे विकल्प।

निर्देश बनाने का सरल तरीका

एक निर्देश लिखने के लिए जिसे HTML मार्कअप में निर्दिष्ट करते समय कहा जाएगा, सरलतम मामले में आपको कुछ फ़ंक्शन सेट करना होगा (इसे लिंकिंग लिंकिंग कहा जाता है, लेकिन बाद में और अधिक) कारखाने द्वारा वापस लौटा दिया गया:

 angular.module('moduleName', []) .directive('directiveName', function () { return function(scope,element,attrs){ } }); 

यह फ़ंक्शन निम्न मापदंडों को स्वीकार करता है:

• गुंजाइश - वह दायरा जिसमें निर्देश कहा जाता है
• तत्व - DOM तत्व जो jQuery लाइट में लिपटे निर्देश का मालिक है
• attrs - एक ऑब्जेक्ट जिसमें टैग को निर्देश कहा जाता है, टैग की सभी विशेषताओं की एक सूची है

आइए एक अधिक विस्तृत उदाहरण का उपयोग करें। हम ऐसा निर्देश लिखते हैं (जिसे हैब्रा-हब्र कहते हैं ), जो दो लाइनों को मोड़ देगा और लेआउट तत्व के अंदर प्रदर्शित करेगा जिसमें इसे कहा जाता है। उसी समय, हम कंट्रोलर वेरिएबल ( forExampleController ) के रूप में एक लाइन सेट करेंगे, और उसी टैग में विशेषता ( हैब्रा ) पास करने के लिए दूसरा। और निर्देशन को कॉल करते समय नियंत्रक चर का नाम निर्धारित करने की क्षमता भी आरक्षित करें:

[ jsFiddle ]

 <div ng-app="helloHabrahabr"> <div ng-controller="forExampleController"> <input ng-model="word"> <span habra-habr="word" habra="Nehabra"></span> </div> </div> 

 function forExampleController($scope) { $scope.word="Habrahabra" } angular.module('helloHabrahabr', []) .directive('habraHabr', function() { return function($scope, element, attrs) { /* ,       word,     attrs.habraHabr*/ $scope.$watch(attrs.habraHabr,function(value){ element.text(value+attrs.habra); }); } }); 

वह सब है। हमारे आदिम रूप में निर्देश तैयार है। आप अधिक विस्तृत रूप में आगे बढ़ सकते हैं।

विस्तारित विकल्प

अपने पूर्ण रूप में, निर्देशन का कार्य निम्नानुसार है:

 angular.module('moduleName', []) .directive('directiveName', function () { return { compile: function compile(temaplateElement, templateAttrs) { return { pre: function (scope, element, attrs) { }, post: function(scope, element, attrs) { } } }, link: function (scope, element, attrs) { }, priority: 0, terminal:false, template: '<div></div>', templateUrl: 'template.html', replace: false, transclude: false, restrict: 'A', scope: false, controller: function ($scope, $element, $attrs, $transclude, otherInjectables) { } } }); 

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

लिंक और संकलन

लिंक विधि बहुत ही कार्य है जिसे निर्देश कारखाने ने लघु संस्करण में लौटाया है। यहां आपको यह समझने की आवश्यकता है कि अंगुलिराज में संकलन प्रक्रिया को दो चरणों में विभाजित किया गया है:

• संकलन - इस DOM तत्व में प्रयुक्त सभी निर्देशों का विश्लेषण (इसके बच्चे वंशज सहित)
• लिंकिंग - टेम्प्लेट में उपयोग किए जाने वाले वेरिएबल्स और दायरे में वेरिएबल्स को जोड़ना

और एक ही समय में, सरलतम संस्करण और उन्नत एक दोनों में, लिंक विधि सही ढंग से पोस्टलिंक को बुलाएगी , क्योंकि यह चर पहले ही मैप किए जाने के बाद निष्पादित होता है। आइए कुछ उदाहरण देखें।

सबसे पहले, मैं सुझाव देता हूं कि एक विस्तारित एक के तरीके में एक साधारण निर्देश का एक उदाहरण फिर से लिखना।

[ jsFiddle ]

 angular.module('helloHabrahabr', []) .directive('habraHabr', function() { return { link:function($scope, element, attrs) { /* ,       word*/ $scope.$watch(attrs.habraHabr,function(value){ element.text(value+attrs.habra); } ); } } }); 

यही है, सब कुछ वास्तव में पहले की तरह काम करता है। अब हम कार्य को जटिल कर सकते हैं और हमारे वाक्यांश को DOM element.text (...) के साथ सीधे संपर्क के माध्यम से प्रदर्शित नहीं कर सकते हैं, लेकिन अंदर "{{}}} निर्देश को निर्देशित करते हैं:

[ jsFiddle ]

 angular.module('helloHabrahabr', []) .directive('habraHabrNotwork', function() { return { link:function($scope, element, attrs) { element.html("<div>{{"+attrs.habraHabrWork+"}}"+attrs.habra+"</div>"); } } }) .directive('habraHabrWork', function() { return { compile: function compile(templateElement, templateAttrs) { templateElement.html("<div>{{"+templateAttrs.habraHabrWork+"}}"+templateAttrs.habra+"</div>"); }, link: function (scope, element, attrs) { } } }); 

उदाहरण तमातको टिप्पणी के बाद अद्यतन किया गया

ऊपर के उदाहरण में, habraHabrNotwork निर्देश सही ढंग से काम नहीं करेगा , क्योंकि हम पोस्टलिंक में चर के साथ निर्देश "{{}}" सम्मिलित करते हैं, जब संकलन और लिंकिंग पहले से ही पूरा हो चुके हैं। दूसरे शब्दों में, एंगुलरज को यह भी पता नहीं है कि "{{}}" एक निर्देश है जो लागू करने योग्य है।

एक और बात, दूसरा निर्देश। सब कुछ अपनी जगह पर है, हम संकलन से पहले टेम्पलेट "{{" + Attrs.habraHabrNotwork + "+" + "attrs.habra +"}} सम्मिलित करते हैं, और यह सफलतापूर्वक रेंडरिंग पास करता है।

हमें संकलन पद्धति पर ध्यान देना चाहिए। यह पोस्टलिंक फ़ंक्शन और ऑब्जेक्ट को दो मापदंडों के साथ वापस कर सकता है: पूर्व और पोस्ट। जहां प्री और पोस्ट क्रमशः प्रीलिंक और पोस्टलिंक तरीके हैं। विधियों के नाम से ऐसा लग सकता है कि हम लिंक ए के पहले और बाद के तरीकों के बारे में बात कर रहे हैं। लेकिन यह पूरी तरह से सच नहीं है, इन कार्यों को लिंक और डोम में बच्चों के निर्देशों के पहले और बाद में किया जाता है। उदाहरण के लिए:

[ jsFiddle ]

 <div ng-app="helloHabrahabr"> <div ng-controller="forExampleController"> <input ng-model="word"> <span habra-habr-work="word" habra="NehabraParent"> <span habra-habr-work="word" habra="NehabraChild"></span> </span> <pre>{{log}}</pre> </div> </div> 

 function forExampleController($scope) { $scope.word="Habrahabra"; $scope.log=""; } angular.module('helloHabrahabr', []) .directive('habraHabrWork', function() { return { compile: function compile(templateElement, templateAttrs) { templateElement.prepend("<div>{{"+templateAttrs.habraHabrWork+"}}"+templateAttrs.habra+"</div>"); return { pre: function ($scope, element, attrs, controller) { $scope.log+=templateAttrs.habra +' preLink \n'; }, post: function ($scope, element, attrs, controller) { $scope.log+=templateAttrs.habra +' postLink \n'; } } } } }); 

इस पर मैंने विराम देने का प्रस्ताव रखा। यदि विषय दिलचस्प है, तो आने वाले दिनों में मैं गुंजाइश और टेम्पलेट्स के बारे में एक सीक्वल लिखने की कोशिश करूंगा।