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

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

• निर्देश कैसे लिखें?
• निर्देश बनाने का सरल तरीका
• विस्तारित विकल्प
• लिंक और संकलन

टेम्पलेट और टेम्प्लेट

निर्देशों की चर्चा जारी रखते हुए, यह ध्यान दिया जाना चाहिए कि निर्देश अनिवार्य रूप से मॉड्यूल हैं, अगर हम एंगुलरजस शब्दावली को अनदेखा करते हैं। यही है, आदर्श रूप से, उन्हें अपनी कार्यक्षमता और मार्कअप के साथ स्वतंत्र इंटरफ़ेस तत्व होना चाहिए। इस स्थिति में, मार्कअप को सीधे टेम्पलेट पैरामीटर में निर्दिष्ट किया जा सकता है या एक अलग फ़ाइल में संग्रहीत किया जा सकता है, जिनमें से URL टेम्प्लेट में निर्दिष्ट है:

[ jsFiddle ]

angular.module('helloHabrahabr', []) .directive('habraHabr', function() { return { template:"<span>Hello Habr!</span>" /*  */ templateUrl:"helloHabr.html" } }); 

helloHabr.html

 <span>Hello Habr!</span> 

इस मामले में, यदि टेम्पलेट लोड किया गया है, तो संकलन और लिंक फ़ंक्शन लोड करने के बाद किए जाते हैं।

टिप्पणियों में उपयोगी जोड़

क्षेत्र

स्कोप पैरामीटर निर्देश के भीतर गुंजाइश को परिभाषित करता है। कई विकल्प संभव हैं:

गुंजाइश बिल्कुल भी न रखें। फिर निर्देश, मोटे तौर पर, सीधे नियंत्रक के दायरे में काम करता है। यही है, सभी नियंत्रक चर निर्देश चर के बराबर हैं।

[ jsFiddle ]

 <div ng-app="helloHabrahabr"> <div ng-controller="forExampleController"> {{hello}} <span habra-habr></span> </div> </div> 

 function forExampleController($scope){ $scope.hello="Hello Habr!"; } angular.module('helloHabrahabr', []) .directive('habraHabr', function() { return { template:"<input ng-model='hello'>{{hello}}" } }); 

एक और विकल्प। स्कोप = सत्य। इस मामले में, दायरा विरासत में मिलेगा। यही है, पैतृक दायरे में निर्दिष्ट फ़ील्ड को भी गुंजाइश निर्देश में प्रदर्शित किया जाएगा, लेकिन सभी परिवर्तन स्थानीय होंगे:

[ jsFiddle ]

 function forExampleController($scope){ $scope.hello="Hello Habr!"; } angular.module('helloHabrahabr', []) .directive('habraHabr', function() { return { template:"<input ng-model='hello'>{{hello}}", scope:true } }); 

और अंत में, सबसे दिलचस्प विकल्प। एक अलग दायरा निर्धारित करें। यही है, गुंजाइश, जो डिफ़ॉल्ट रूप से निर्देश कॉल के संदर्भ में पूरी तरह से स्वतंत्र है। ऐसा करने के लिए, खाली वस्तु {} को स्कोप के रूप में निर्दिष्ट करें:

[ jsFiddle ]

 angular.module('helloHabrahabr', []) .directive('habraHabr', function() { return { template:"<input ng-model='hello'>{{hello}}", scope:{ } } }); 

इस तरह के अलग-थलग दायरे के साथ काम करने के लिए कई विकल्प हैं। लेकिन वे सभी एक सिद्धांत पर आते हैं। उस वस्तु में जिसे हमने गुंजाइश के लिए घोषित किया है, निर्देश का एक चर बाईं तरफ संपत्ति के नाम के रूप में इंगित किया गया है, और दाईं ओर डोम विशेषता का नाम है, जिसमें शुरुआत में तीन पात्रों में से एक है: @ / = / &। वह इस प्रकार है:

 scope:{ localVar1:"@attrName1", localVar2:"=attrName2", localVar3:"&attrName3" } 

या एक और विकल्प। एक विशेषता नाम निर्दिष्ट न करें, तो यह चर नाम के बराबर होगा:

 scope:{ localVar1:"@", /*localVar1:"@localVar1" */ localVar2:"=", /*localVar2:"@localVar2" */ localVar3:"&" /*localVar3:"@localVar3" */ } 

अब क्रम में। उपसर्ग "@" का अर्थ है कि विशेषता मान स्थानीय चर को सौंपा जाएगा:

[ jsFiddle ]

 <div ng-app="helloHabrahabr"> <span habra-habr="hello" some-attr="Hello Habr!"></span> </div> 

 angular.module('helloHabrahabr', []) .directive('habraHabr', function() { return { template:"{{hello}}", scope:{ hello:'@someAttr' } } }); 

उपसर्ग "=" का अर्थ है कि कोई स्ट्रिंग विशेषता में पारित नहीं हुई है, लेकिन वर्तमान स्कोप में कुछ चर का नाम है। और स्थानीय चर इसका सीधा संबंध होगा। यही है, निर्देश के अंदर और बाहर चर दोनों में परिवर्तन वहाँ और वहाँ दोनों परिलक्षित होगा:

[ jsFiddle ]

 <div ng-app="helloHabrahabr"> <div ng-controller="forExampleController"> {{hello}} <span habra-habr some-attr="hello"></span> </div> </div> 

 function forExampleController($scope){ $scope.hello="Hello Habr!"; } angular.module('helloHabrahabr', []) .directive('habraHabr', function() { return { template:"<input ng-model='hello'>{{hello}}", scope:{ hello:'=someAttr' } } }); 

अंत में, का अंतिम संस्करण बताता है कि विशेषता में एक अभिव्यक्ति है। उदाहरण के लिए, "c = a + b" या बस "a + b"। और अब आपका स्थानीय वैरिएबल एक फंक्शन बन जाता है जिसमें आप पैरामीटर पास कर सकते हैं। पैरामीटर एक ऑब्जेक्ट में पारित किए जाते हैं जिनकी कुंजी फ़ंक्शन में चर के नाम हैं। विशिष्ट मामले में, लोकल्वार ({a: 1, b: 2}) तीन वापस आ जाएंगे।

[ jsFiddle ]

 angular.module('helloHabrahabr', []) .directive('habraHabr', function() { return { template:"{{helloFn({a:1,b:2})}}", scope:{ helloFn:'&someAttr' } } }); 

यह दिलचस्प है कि डिफ़ॉल्ट रूप से, यदि आप स्थानीय फ़ंक्शन के किसी भी पैरामीटर को पास नहीं करते हैं, तो चर को पैरेंट स्कोप में संबंधित चर के मूल्यों को सौंपा जाएगा। और यदि आप परिणाम चर को निर्दिष्ट करते हैं, तो यह बाहर से भी उपलब्ध होगा:

[ jsFiddle ]

 <div ng-app="helloHabrahabr"> <div ng-controller="forExampleController"> a={{a}} b={{b}} parent's hello={{hello}} <span habra-habr some-attr="hello= a+b"></span> </div> </div> 

 function forExampleController($scope){ $scope.a="Hello"; $scope.b=" Habr!"; } angular.module('helloHabrahabr', []) .directive('habraHabr', function() { return { template:"default helloFn={{helloFn()}}\ custom hello={{helloFn({a:'Bye',b:'Habr'})}}", scope:{ helloFn:'&someAttr' } } }); 

जारी रखने के लिए आप सभी का धन्यवाद।