AngularJS - यूआरएल के लिए इनपुट क्षेत्र http उपसर्ग जोड़ने

Question

हमारे एप्लिकेशन बूटस्ट्रैप (कोणीय-ui बूटस्ट्रैप) के साथ AngularJS के लिए jQuery से मोड़ा जा रहा है।

एक उपयोगी सुविधा है जो निम्न उत्कृष्ट डाक द्वारा कवर किया गया था "http: //" जोड़ने के लिए था कि वह पहले से एक उपसर्ग नहीं था उपसर्ग एक URL फ़ील्ड: http://www.robsearles.com/2010/05/jquery-validate-url-adding-http/

मैं एक ही प्राप्त करने के लिए कोशिश कर रहा हूँ एंगुलरजेएस में निर्देश के माध्यम से, लेकिन एनजी-मॉडल के मूल्य को बदलने के निर्देश को प्राप्त नहीं किया जा सकता है क्योंकि इसे टाइप किया जा रहा है।

मैंने अभी तक प्रत्येक बदलाव पर "http: //" उपसर्ग जोड़ने के लिए एक पहेली प्राप्त करने की कोशिश करके सरल शुरुआत की है (मैं तर्क के बाद बाद में इसे जोड़ने के लिए तर्क जोड़ सकता हूं)। http://jsfiddle.net/LDeXb/9/

app.directive('httpPrefix', function() { 
    return { 
     restrict: 'E', 
     scope: { 
      ngModel: '=' 
     }, 
     link: function(scope, element, attrs, controller) { 
      element.bind('change', function() { 
       scope.$apply(function() { 
        scope.ngModel = 'http://' + scope.ngModel; 
       }); 
      }); 
     } 
    }; 
}); 

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

Answer 1

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

आपको अपने निर्देश में ng-model से controllercontroller पर करने की आवश्यकता है। ': //http' को देखने के लिए, और एक पार्सर जब जरूरत है कि मॉडल में यह धक्का तो फिर तुम एक फ़ॉर्मेटर कि कहते हैं में धक्का कर सकते हैं। इनपुट के साथ सभी बाध्यकारी काम और इंटरफेसिंग ng-model द्वारा किया जाता है।

जब तक मैं इस पर एक अच्छा ब्लॉग नहीं ढूंढ सकता (जब भी उन्हें ढूंढने वाले किसी भी व्यक्ति से टिप्पणियों के लिए बहुत खुले होते हैं), तो इसका अद्यतन करने का शायद सबसे अच्छा तरीका यह है कि यूआरएल के लिए मैन्युअल रूप से 'http' 'या' https ', साथ ही ऑटो लगाकर करता है, तो उनमें से कोई भी: http://jsfiddle.net/jrz7nxjg/

यह भी रूप में आप नहीं रह गया है की जरूरत है, एक तत्व पर दो अलग स्कोप में सक्षम नहीं होने के अपने दूसरे समस्या का हल कुछ भी बांधो।

Answer 2

मैट बायर्न द्वारा प्रदान की गई पिछली टिप्पणी https उपसर्ग के लिए काम नहीं करती है। पिछले उत्तर के आधार पर अपडेट किए गए संस्करण को चेकआउट करें जो ** https उपसर्ग के साथ भी काम करता है! यह वहाँ

/^(https?):\/\//i 

http://jsfiddle.net/ZaeMS/13