कोणीय जेएस निर्देश घड़ी वैधता

Question

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

<input type="text" ng-model="primeNumber" validate-prime invalid-add-class="error"> 

सत्यापित करें-प्राइम का उपयोग करता है मॉडल की वैधता को अद्यतन करने के लिए एनजी मॉडल पर पार्सर्स और फॉर्मेटर्स।

अब मैं अमान्य-एड-क्लास निर्देश चाहता हूं कि मॉडल अमान्य होने पर वर्ग "त्रुटि" जोड़ने के लिए और वैध होने पर इसे हटाने के लिए। दूसरे शब्दों में, इसे मॉडल नियंत्रक की $ मान्य (या $ अमान्य) संपत्ति देखना चाहिए। हालांकि, मैं यह नहीं समझ सकता कि यह काम कैसे प्राप्त करें। मैंने कोशिश की:

link : function(scope, element, attrs, ctrl) { 
    ctrl.$watch("$valid", function(newVal, oldVal) { 
    //never fired 
    }); 
} 

शायद मैं कुछ चरम पर देख सकता हूं, लेकिन मुझे नहीं पता कि किस चर के लिए देखना है।

तो मॉडल की वैधता कब बदलती है तो मुझे कैसे सूचित किया जा सकता है? यदि आप एक <form> है, तो

Answer 1

, जोड़ने के एक name इसे करने के लिए और अपने इनपुट के लिए एक name (मान 'MyForm' की सुविधा देता है) (की सुविधा देता है मान myInput)। आप द्वारा $watch इस में सक्षम होना चाहिए: यदि आप एक form नहीं है, तो

scope.$watch('myForm.myInput.$valid', function(validity) {}) 

, तो आप हमेशा एक समारोह देख सकते हैं। इस तरह:

scope.$watch(function() { return ctrl.$valid; }, function(validity){}); 

आप प्रपत्र दृष्टिकोण here के बारे में अधिक पढ़ सकते हैं।

Answer 2

हमारा लक्ष्य, सामान्य रूप से, किसी भी रूप या इनपुट से स्वतंत्र रूप से निर्देश का काम करना चाहिए। हम इसे स्थानीय $valid संपत्ति को अनिवार्य रूप से बिना किसी विशिष्ट फ़ॉर्म & इनपुट नाम पर बाध्य किए बिना संपत्ति को पढ़ने की अनुमति कैसे दे सकते हैं?

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

require: 'ngModel', 
link: function postLink(scope, element, attrs, controller) { 
    scope.inputCtrl = controller; 
    scope.$watch('inputCtrl.$valid', handlerFunc) 
} 

हैंडलर को उस संरचना के साथ $ मान्य में परिवर्तनों पर लगातार आग लगनी चाहिए। this Fiddle देखें, जहां इनपुट को यू.एस. ज़िप-कोड या ज़िप + 4 के पैटर्न के लिए मान्य किया गया है। हर बार वैधता में परिवर्तन होने पर आपको एक चेतावनी मिल जाएगी।

संपादित करें 3/21/14: यह पोस्ट पहले कार्यान्वयन की समस्या के गलत कारण पर तय करने के लिए मेरा भ्रम पर लटका हुआ था। मेरी गलती। ऊपर दिया गया उदाहरण उस निर्धारण को हटा देता है। इसके अलावा, यह दिखाता है कि यह दृष्टिकोण वास्तव में काम करता है, और हमेशा एक बार जब आप घड़ी अभिव्यक्ति के चारों ओर उद्धरण जोड़ते हैं।

Answer 3

आप एक <form /> नहीं है, तो आप आसानी से एक मिल सकता है:

अपने निर्देश परिभाषा में:

require: '^form' 

और फिर अपने लिंक समारोह में, प्रपत्र चौथे पैरामीटर के रूप में पारित हो जाता है:

0:

link: function (scope, element, attr, ctrl) { 

अब आप कड़ी मेहनत से कोड के लिए फार्म या $ घड़ी प्रदर्शन करने के लिए इनपुट क्षेत्र की जरूरत नहीं है

scope.$watch(ctrl.$name + '.' + element.attr('name') + '.$valid', 
function (validity) {});