2013-12-17 11 views
6

मायने रखती है जब मैं सिर्फ कोणीय से एक अजीब व्यवहार का सामना करना पड़ा:कोणीय निर्देश का नाम वास्तव में

यहाँ परिदृश्य है:

एक पंजीकरण फार्म में, मैं एक http कॉल के माध्यम से ईमेल विशिष्टता (के लिए जाँच करना चाहते हैं सर्वर के लिए)।
इस प्रकार, मैं एक निर्देश emailUnique जिसका ग्राहक कोड है बुलाया बनाया:

<form name="form" novalidate> 
<!-- some other fields --> 
<input name="email" type="email" ng-model="user.email" required email-unique/> 
</form> 

पोस्ट के बाकी के लिए, मान लें कि उपयोगकर्ता लिख ​​रहा है करते हैं: michael, जो स्पष्ट रूप से एक मान्य मेल नहीं है।

मेरा निर्देश कोड के दिलचस्प भाग पर एक नज़र डालते हैं, व्यवहार मुझे इसमें रुचि को ट्रिगर करने के लिए:

angular.module('directives.emailUnique', []) 
    .directive('emailUnique', function() { 
     return { 
      restrict: 'A', 
      require: 'ngModel', 
      link: function (scope, el, attrs, ctrl) { 
       ctrl.$parsers.push(function (viewValue) { 
        console.log(viewValue); //What do you expect here for viewValue? answer below 
       }); 
      } 
     }; 
    }); 

पहली नजर में, इस सवाल का जवाब देने से पहले, प्रतिक्रिया तार्किक होगा:

undefined 

क्यों? क्योंकि:

  • हम सटीक type="email" विशेषता और नहीं बस type="text"
  • michael नहीं एक मान्य मेल है।
  • कोणीय का कंपाइलर क्लासिक HTML व्यवहार के अनुरूप होना चाहिए।

इसका परीक्षण करने के बाद, उत्तर undefined अपेक्षित है। मेरा पूरा निर्देश तर्क उस पर आधारित होगा और पूरा काम ठीक होगा।

अब, निर्देश का नाम बदलें: emailUniquesomethingUnique बनना।
ग्राहक अब किया जा रहा है:

<input name="email" type="email" ng-model="user.email" required something-unique/> 

आश्चर्य: console.log(viewValue) अब प्रदर्शित कर रहा है: michael, नहीं undefined ...

जाहिर है, नाम के लिए email के साथ शुरू एक अजीब प्रभाव पड़ता है जब एक ईमेल क्षेत्र के साथ काम इस मामले में।

मेरा प्रश्न सरल है: क्या कोई अच्छा कारण है? एक संभावित बग? क्या मैं कुछ धारणा को गलत समझ सकता हूं?

कुछ आगे precisions:

  • कोणीय साथ ईमेल क्षेत्र के बारे में Angular's documentation कुछ email विशेषता है कि email-unique साथ हस्तक्षेप कर सकता प्रस्तुत नहीं करती। दरअसल, यह type="email"
  • पर आधारित है, मैं उसी मुद्दे पर आया था कि फॉर्म novalidate विशेषता मौजूद है या नहीं।
+0

यहां एक प्लंकर है जिसे मैंने अभी इस मुद्दे को दिखाने के लिए बनाया है: http://plnkr.co/edit/T9YfiDr5IU5vOrMtggY3?p=preview – Mik378

उत्तर

5

मुद्दा निर्देशक की प्राथमिकता है। चूंकि आप अपने पार्सर्स को जोड़े जाने के समय पर निर्भर हैं, इसलिए आप निर्देश की प्राथमिकता निर्धारित करना चाहते हैं- जो आपको आवश्यक समय सुनिश्चित करेगा।

आपके डेमो में somethingUnique निर्देश पार्सर्स सूची में सत्यापन को जोड़ने से पहले चल रहा है (यह 3 पार्सर्स के बीच समाप्त होता है)। जबकि emailUnique के साथ इसे जोड़ा गया है।

0 से अधिक कुछ के लिए अपने निर्देश की प्राथमिकता को सेट करने से यह सुनिश्चित होता है कि ईमेल के बाद आपको undefined दे रहा है ($compile docs से नोट करना: "पोस्ट-लिंक फ़ंक्शन रिवर्स ऑर्डर में चलाए जाते हैं")। नाम इस मुद्दे पर

.directive('somethingUnique', function() { 
    return { 
     restrict: 'A', 
     require: 'ngModel', 
     priority: 100, 
     link: function (scope, el, attrs, ctrl) { 
      ctrl.$parsers.push(function (viewValue) { 
       console.log(viewValue); 
      }); 
     } 
    }; 
}); 

Updated plunker

अपडेट:: इस आप कुछ करने के लिए यह की प्राथमिकता निर्धारित करके विफल emailUnique मजबूर कर सकते हैं पुष्टि करने के लिए कम से कम 0.

तो इससे समस्या हल हो यह ऐसा लगता है कि कोणीय प्रक्रियाओं को वर्णमाला क्रम में समान प्राथमिकता के साथ निर्देशित करता है। तो homethingUniqueemailUnique जैसा कार्य करता है क्योंकि दोनों input से पहले आते हैं जबकि jomehtingUniquesomethingUnique जैसा व्यवहार करता है - इनपुट के बाद चल रहा है।

लेकिन Angular's docs कहते हैं: "समान प्राथमिकता वाले निर्देशों का आदेश अनिर्धारित है।" तो हम वर्णमाला क्रम पर भरोसा नहीं कर सकते हैं।

+0

बहुत बढ़िया। "यहां नाम क्यों मायने रखता है वह एक पहेली है जिसे मैं और अधिक खोदना चाहता हूं" => कारण जानने के लिए बहुत उत्सुक है। – Mik378

+1

यह पता लगाया, बस अपडेट किया गया। – KayakDave

+0

ग्रेट, बहुत रोचक :) लेकिन एक सवाल: जितना अधिक निर्देश 'प्राथमिकता' अधिक है, उतना ही उसका पार्सर जल्दी दौड़ जाएगा, है ना? अगर मैं कुछ यूनिक के लिए 100 सेट करता हूं, तो इसके संबंधित पार्सर ईमेल सत्यापन से पहले क्यों नहीं चलते हैं, क्योंकि इसे पहले धक्का दिया जाएगा? ईमेल वैलिडेशन का मानना ​​डिफ़ॉल्ट है 0. - – Mik378

संबंधित मुद्दे