निर्देशों का विस्तार और लेआउट

निर्देशों के बारे में बहुत कुछ लिखा गया है, लेकिन उन्हें सही तरीके से कैसे लिखा जाए, इसके बारे में बहुत कम। मैं अपना अनुभव साझा करूंगा।

एक अच्छा लिखित निर्देश चाहिए

• एक समस्या हल करो
• विस्तार करना आसान है
• अन्य निर्देशों के साथ संघर्ष मत करो

आइए एक पासवर्ड फ़ील्ड के उदाहरण का उपयोग करके प्रत्येक आइटम का विश्लेषण करें (मुझे लगता है कि हर कोई आंख के साथ क्षेत्र जानता है)

<input ng-model="user.password" ng-minlength="6" form-password form-error="  6 "> 

कितने निर्देशों का उपयोग किया जाता है?
वास्तव में, उनमें से 7 हैं

1. ng-model
2. ng-minlength
3. form-password - इनपुट को अपने स्वयं के टेम्पलेट से बदल देता है और आंख पर क्लिक करने पर फ़ील्ड प्रकार (पासवर्ड / पाठ) को बदल देता है
4. form-error - यदि पासवर्ड लंबे समय तक न हो तो त्रुटि के टूलटिप को दिखाता है
5. form-error-tooltip - टूलटिप को तत्व के ऊपर दिए गए टेक्स्ट के साथ दिखाता है
6. form-error-tooltip-template - form-error-tooltip-template साथ सहायक निर्देश
7. tooltip - कोणीय बूटस्ट्रैप लाइब्रेरी से निर्देश, जिसका हम विस्तार करेंगे

परिभाषा

कोणीय-ui.imtqy.com/bootstrap/#/tooltip और उसके विशेष कोड से टूलटिप पर विचार करें

पहली चीज जो आपकी आंख को पकड़ती है वह निर्देश परिभाषा वस्तु है, जिसे एक अलग सेवा $tooltip में निकाला जाता है। इस वजह से, निर्देश निम्नानुसार परिभाषित किया गया है:

 .directive( 'tooltip', [ '$tooltip', function ( $tooltip ) { return $tooltip( 'tooltip', 'tooltip', 'mouseenter' ); }]) 

दूसरा टूलटिप टेम्पलेट की कमी है। इसके बजाय, हम एक ऐसा तत्व देखते हैं, जिस पर directiveName +'-popup ' नाम का एक निर्देश बनाया और कॉन्फ़िगर किया गया है (directiveName = tooltip इस मामले में):

 '<div '+ directiveName +'-popup '+ 'title="'+startSym+'tt_title'+endSym+'" '+ 'content="'+startSym+'tt_content'+endSym+'" '+ 'placement="'+startSym+'tt_placement'+endSym+'" '+ 'animation="tt_animation" '+ 'is-open="tt_isOpen"'+ '>'+ '</div>'; 

नीचे यह निर्देश प्राप्त करें (इसे टेम्पलेट कहते हैं):

 .directive( 'tooltipPopup', function () { return { restrict: 'EA', replace: true, scope: { content: '@', placement: '@', animation: '&', isOpen: '&' }, templateUrl: 'template/tooltip/tooltip-popup.html' }; }) 

टेम्प्लेट / टूलटिप / टूलटिप-पॉपअप.html पर, हम अंत में टूलटिप टेम्पलेट ढूंढेंगे।

एक पाठक के रूप में, मैंने शायद अनुमान लगाया कि ऐसी बिल्ली की आवश्यकता है ताकि हम अपने कार्यात्मक कोड का उपयोग करके विभिन्न टेम्पलेट्स के साथ कई टूलटिप निर्देश बना सकें।

आइए अपने टेम्पलेट के साथ त्रुटि युक्तियां प्रदर्शित करने के लिए एक निर्देश बनाएं। टूलटिप दिखाई देगा यदि open घटना तत्व पर चालू हो जाती है और अगर - close

 app.directive('formErrorTooltip', function($tooltip) { return $tooltip('formErrorTooltip', 'formErrorTooltip', 'open'); }); 

एक पंक्ति। कूल?

नाम प्रपत्र-त्रुटि-टूलटिप-पॉपअप के साथ टेम्पलेट निर्देश को एक टेम्पलेट के रूप में लिया जाएगा (निर्देश नाम याद रखें - '- पॉपअप')। टूलटिप-पॉपअप को कॉपी करके अग्रिम रूप से बनाएं, टेम्पलेट के नाम और पथ की जगह।

open और close घटनाओं का समर्थन नहीं किया जाता है, लेकिन इससे कोई फर्क नहीं पड़ता। डेवलपर्स ने अपनी स्वयं की घटनाओं को जोड़ना संभव बना दिया।

 app.config(function($tooltipProvider) { $tooltipProvider.setTriggers({'open': 'close'}); }); 

विस्तार

तो, हमारे पास form-error-tooltip है जो एलिमेंट form-error-tooltip को एलिमेंट से ऊपर दिखा रहा है। यदि कुछ अक्षर दर्ज किए जाते हैं तो इसे त्रुटियां दिखाते हैं (इस परियोजना में यह सिखाना मुश्किल नहीं है कि सर्वर त्रुटियों सहित किसी भी त्रुटि को कैसे संभालें)। हम form-error निर्देश लिखेंगे, जो पहले विस्तार करेगा:

 app.directive('formError', function($compile, $interpolate, $injector) { return { terminal: true, priority: 100, scope: true, compile: function compile(tElement, tAttrs) { var startSym = $interpolate.startSymbol(), endSym = $interpolate.endSymbol(), self = this; tElement.attr('form-error-tooltip', startSym + 'message' + endSym); angular.forEach(tAttrs.$attr, function(value, attr) { var ddo = $injector.has(attr + 'Directive') ? $injector.get(attr + 'Directive')[0] : {}; if (ddo.terminal && ddo.priority >= self.priority) { tElement.removeAttr(value); } }); return function(scope, element, attrs, controller) { $compile(element)(scope); var ngModelCtrl = element.controller('ngModel') element.on('input blur change', checkValidity); function checkValidity() { if (ngModelCtrl.$error.minlength) { setError(attrs.formError); } else if (element.scope() && element.scope().tt_isOpen) { //avoid tooltip bug element.triggerHandler('close'); } } function setError(message) { scope.message = message; scope.$digest(); //set message to tooltip element.triggerHandler('open'); } }; } }; }); 

जैसा कि आप कोड से देख सकते हैं, यह तत्व में form-error-tooltip निर्देश जोड़ता है और उस पर open और close घटनाओं को ट्रिगर करता है, यह इस बात पर निर्भर करता है कि कोई त्रुटि है या नहीं। लेकिन वह यह कैसे करती है? यह सभी प्राथमिकताओं के बारे में है।

स्थापित terminal: true, priority: 100 कारण terminal: true, priority: 100 कोई अन्य गैर-टर्मिनल निर्देश या कम प्राथमिकता वाले निर्देशों को निष्पादित नहीं किया जाएगा। दूसरे शब्दों में, इस निर्देश से पहले केवल ng-if, ng-repeat, ng-include आदि को निष्पादित किया जाएगा, अर्थात निर्देश जो निर्धारित करते हैं कि किसी आइटम को प्रदर्शित करना है या नहीं।

इसके बाद, विशेषता form-error-tooltip={{message}} , निर्देशों की विशेषताओं को उच्च प्राथमिकता (जो पहले से ही पूरा हो चुका है) को हटा दें, जिसमें निर्देश भी शामिल है, ताकि यह स्वयं को अनिश्चित काल तक निष्पादित न करें, और तत्व को फिर से खोलें। अब सभी शेष निर्देशों को निष्पादित किया जाएगा, जिसमें निर्देश प्रदर्शित करने वाले टूलटिप भी शामिल है, और कोई संघर्ष नहीं होगा।

व्यवस्था

इसी तरह, हम पासवर्ड निर्देश के साथ आगे बढ़ेंगे, जिसे तत्व को अपने टेम्पलेट से बदलना चाहिए:

 app.directive('formPassword', function($compile, $injector) { return { restrict: 'AE', terminal: true, priority: 200, templateUrl: 'passwordTemplate.html', replace: true, scope: true, compile: function(tElement, tAttrs) { var input = tElement.find('input')[0], self = this; angular.forEach(tAttrs.$attr, function(value, attr) { var ddo = $injector.has(attr + 'Directive') ? $injector.get(attr + 'Directive')[0] : {}; if (attr !== 'type' && attr !== 'class' && attr !== 'formPassword' && (!ddo.terminal || ddo.priority < self.priority)) { input.setAttribute(value, tAttrs[attr]); } if (attr !== 'class') { tElement.removeAttr(value); } }); return function(scope) { scope.show = false; } } }; }); 

बेशक, आप tranclude उपयोग कर सकते हैं, लेकिन फिर आपको एक कंटेनर में तत्व लपेटना होगा या ऐसे बगीचे को बाड़ देना होगा, जो पहले से बेहतर है।

इस निर्देश की प्राथमिकता पिछले एक से अधिक है, जिसका अर्थ है कि यह एक आंख के साथ एक क्षेत्र बनाएगा और उसके बाद ही निर्देश को संभालने में त्रुटि को लागू किया जाएगा। दूसरी ओर, प्राथमिकता ng-if या ng-repeat की तुलना में कम है, इसलिए यह सभी निर्माण आवश्यक रूप से कई बार छिपे, दिखाए या प्रचारित किए जाएंगे और निर्देश एक-दूसरे के मित्र होंगे।

लाइव उदाहरण: plnkr.co/edit/BSVN7zZb0vNEAXo7iWhM?p?preview