2013-10-14 10 views
5

मैं एक कस्टम ऑटो-पूर्ण निर्देश बना रहा हूं जो <input> का उपयोग अपने आप में करता है, लेकिन मुझे 'आवश्यक' विशेषता को पार करने के तरीके को समझने में थोड़ा परेशानी हो रही है, अन्य विशेषताएँ जिनके मूल्य मैं देख सकते हैं लेकिन 'आवश्यक 'यह रिक्त प्रतीत होता है कि यह सेट है या नहीं। नीचे मेरे रिटर्न स्टेटमेंट का पहला भाग:क्या एंगुलरजेएस निर्देश में 'आवश्यक' पास करना संभव है?

return { 
      restrict: 'E', 
      template: tpl, 
      replace: true, 
      scope: { 
       suggestionsPath: '=autoComplete', 
       method: '@method', 
       term: '@term', 
       required: '@required', 
       ngModel: "=" 
      }... 

धन्यवाद!

+0

के रूप में एनजी-आवश्यक द्वारा व्याख्या की जा सकती है, इसके बजाय आप अपने निर्देश के दायरे में 'ng-required' और' ngRequired' आज़मा सकते हैं। – jpmorin

+2

आप अपने लिंक फ़ंक्शन में 'attrs.required' विशेषता' के अंदर क्या देख सकते हैं और देख सकते हैं कि कुछ है या नहीं। – jpmorin

+1

क्या कोई कारण है कि आपको इसके लिए एक अलग दायरे की आवश्यकता है? यह आसान प्रतीत हो सकता है लेकिन यह अक्सर नहीं है। मैं सुझाव देता हूं कि "ngModelController" और "attrs" और $ scope का उपयोग करके एक आवश्यकता को अलग करें। यदि आपको गतिशील बाध्यकारी की आवश्यकता है तो $ देखें। अगर आप एक पूर्ण समाधान चाहते हैं, तो मुझे बताएं, अगर आप जेएसफ़िल्ड या कुछ पोस्ट करते हैं तो मैं मदद करने की कोशिश करूंगा। प्रतिक्रिया के लिए –

उत्तर

4

मैंने इनपुट में कुछ एक्सटेंशन बनाए हैं और मौजूदा ngModel बाइंडिंग का विस्तार करने के लिए सबसे अच्छा (तर्कसंगत) एकमात्र तरीका आपके निर्देश में ngModelController का उपयोग कर रहा है। "आवश्यकता" संपत्ति का उपयोग करके आपको किसी अन्य निर्देशक के नियंत्रक की आवश्यकता हो सकती है। documentation for ngModelController is here

यह आपको मॉडल मूल्यों को प्राप्त/सेट करने के साथ-साथ आवश्यकतानुसार सत्यापन व्यवहार को विस्तार या प्रतिस्थापित करने की अनुमति देगा। क्योंकि अब आप एंगुलरजेएस इनपुट निर्देशों के संयोजन में विस्तार कर रहे हैं, इसलिए आप शायद इस काम के उदाहरणों के लिए AngularJS के अंदर इनपुट निर्देशों को देखना चाहेंगे। वे ngFormController के साथ संपूर्ण रूप के लिए माता-पिता के रूप में टेंगेंट में भी काम कर सकते हैं। मुझे समझने में थोड़ी देर लग गई, इसलिए धीरज रखें लेकिन यह करने के लिए अब तक का सबसे अच्छा तरीका है।

मैं यहां अलग-अलग क्षेत्रों से बचूंगा, वे मुश्किल हो सकते हैं, हमेशा अन्य निर्देशों के साथ अच्छी तरह से खेलें (इसलिए आम तौर पर केवल नए तत्वों या चीजों पर इसका उपयोग करें जहां केवल एक ही निर्देश स्वयं ही मौजूद होगा)।

return { 
     restrict: 'E', 
     template: tpl, 
     replace: true, 
     require: 'ngModel', 
     link: function(scope, element, attrs, ngModelController) { 
      // Use attrs to access values for attributes you have set on the lement 
      // Use ngModelController to access the model value and add validation, parsing and formatting 
      // If you have an attribute that takes an expression you can use the attrs value along with $scope.$watch to check for changes and evaluate it or the $parse service if you just want to evaluate it. 
     } 

मैं निर्देश डिजाइन के साथ आप कर सकते हैं के रूप में के रूप में परिचित हो रही है के रूप में कस्टम आदानों बहुत मुश्किल वे क्या करते हैं पर निर्भर करता है (हम उस के रूप में +/- बटन जोड़ने कस्टम आदानों का निर्माण किया है प्राप्त कर सकते हैं की सिफारिश: मैं कुछ इस तरह डिजाइन होगा साथ ही उन लोगों के रूप में जो संख्याओं को प्रतिशत, मुद्राएं या अल्पविराम के साथ संख्याओं को प्रारूपित करते समय प्रारूपित करते हैं)। एक तरफ ngModelController डॉक्स इन उपयोगी होते हैं से समीक्षा करने के लिए:

2

आवश्यक कुछ ही एक मजेदार विशेषता है (यहां देखें Setting an attribute named "required" and any value, with JQuery, doesn't work)। इस पर आपको किसी भी प्रकार के मूल्य से गुजरने में बहुत परेशानी होगी क्योंकि इसका प्रभाव यह निर्धारित करता है कि यह मौजूद है या नहीं, इसके मूल्य से नहीं। विभिन्न ब्राउज़र इसका अलग-अलग व्यवहार करेंगे और मूल्य को फिर से लिख सकते हैं।

आपको भी परेशानी होगी क्योंकि required और ngModel दोनों निर्देश हैं जो आपके तत्व पर संकलित किए जाएंगे। requiredngModel से बात करेगा और यदि आप चीजें काम करना चाहते हैं तो आपको ngModelproperly लागू करने की आवश्यकता होगी।

required और ngModel को अन्य नामों का नाम बदलने का एक आसान विकल्प है। जैसे myRequired और myNgModel। इसके बाद आप ng-model सीधे scope.myNgModel पर बाध्य कर सकते हैं और ng-required से myRequired पर बाध्य कर सकते हैं।

1

मैं जानता हूँ कि यह एक पुराने सवाल है, के लिए लेकिन जो दूसरों के लिए देख आओ के लिए AngularJS कोड (जो यह है कि मैं यहां कैसे समाप्त हुआ):

आप बूलियन के रूप में पढ़ने के लिए आवश्यक टैग को आवश्यक टैग पास कर सकते हैं, और फिर उस मान का उपयोग एनजी-आवश्यक में कर सकते हैं।

return { 
    restrict: 'E', 
    template: tpl, 
    replace: true, 
    scope { 
     required:'@' 
    } 

फिर अपने निर्देश टेम्पलेट में आप

<input type="text" ng-required="required" /> 

या तो विशेषता 'आवश्यक' के रूप में यह प्रयोग करेंगे पाया जाता है और उसके बाद निर्देश में सही पर सेट किया जाता है, या विशेषता नहीं पाया जाता है जो होगा झूठी मान

+0

बस जो मैं खोज रहा था। फिर अपने एचटीएमएल में आप 'आवश्यक' जोड़ सकते हैं या इसे छोड़ सकते हैं और निर्देश पर प्रतिबिंबित करेंगे। – Sagi

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