मायने रखती है जब मैं सिर्फ कोणीय से एक अजीब व्यवहार का सामना करना पड़ा:कोणीय निर्देश का नाम वास्तव में
यहाँ परिदृश्य है:
एक पंजीकरण फार्म में, मैं एक 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
अपेक्षित है। मेरा पूरा निर्देश तर्क उस पर आधारित होगा और पूरा काम ठीक होगा।
अब, निर्देश का नाम बदलें: emailUnique
somethingUnique
बनना।
ग्राहक अब किया जा रहा है:
<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
विशेषता मौजूद है या नहीं।
यहां एक प्लंकर है जिसे मैंने अभी इस मुद्दे को दिखाने के लिए बनाया है: http://plnkr.co/edit/T9YfiDr5IU5vOrMtggY3?p=preview – Mik378