एंगुलरजेएस और निर्देशों के साथ शुरुआती प्रश्न - एक jQuery घटक

Question

लपेटना सबसे पहले, मुझे जिक्र करना चाहिए कि मैं क्लाइंटसाइड प्रोग्रामिंग में बदलाव करने पर काम कर रहा हूं। मैं जेएस के लिए बहुत नया हूँ। मेरा पिछला अनुभव मुख्य रूप से सी और कुछ असेंबली में है। मैंने अभी भी बहुत ही सरल PHP साल पहले किया था जब यह अभी भी 4.0 था। तो संक्षेप में, जावास्क्रिप्ट के लिए नया लेकिन मेरे सिर को थोड़ा सा डालना।

मैंने काफी कुछ खोज और गुप्त किया है लेकिन मेरे मुद्दों को सुधारने में सक्षम नहीं हैं।

मैं अंगुलरजेएस की कुछ मूलभूत बातें ढूंढ रहा हूं और यह काफी अच्छा है, लेकिन मुझे अपने सिर को लपेटने में कठिनाई हो रही है कि निर्देश कैसे काम करते हैं और कस्टम नियंत्रण से डेटा कैसे प्राप्त करें।

लंबी कहानी छोटी मैं कोणीय के साथ बूटस्ट्रैप कार्य के लिए कस्टम नियंत्रण करने की कोशिश कर रहा हूं ताकि मैं इसे फ़ॉर्म में सही तरीके से उपयोग कर सकूं। http://tarruda.github.com/bootstrap-datetimepicker/

मैं कुछ अन्य नियंत्रण है कि मैं काम करने के लिए करना चाहते हैं, लेकिन मैं समझ अगर मैं इस एक मैं शायद अन्य लोगों को आसानी पर्याप्त प्राप्त कर सकते हैं जा रहा प्राप्त कर सकते हैं:

यहाँ नियंत्रण है।

यहाँ एक बुनियादी ढांचा क्या मैं इस बिंदु पर करने के लिए एक कड़ी है: http://jsfiddle.net/uwC9k/6/

सबसे पहले, मैं चारों ओर मेरे सिर लपेटो करने नियंत्रण को प्रारंभ करने के लिए कैसे एक बार मैं (जो काम कर रहा टेम्पलेट है कोशिश कर रहा हूँ, मैं काफी इस बिंदु पर मुझे लगता है कि कर)

link: function(scope, element, attr) { 
      attr.$observe('dpid', function(value) { 
       if(value) { 
       $('#' + scope.dpid).datetimepicker({ 
        language: 'en', 
        pick12HourFormat: true 
      }); 
} 

जब मैं डाल दिया है कि लिंक निर्देश में, यह कुछ भी नहीं करता है। मुझे कोई भी त्रुटि दिखाई नहीं दे रही है। scope.dpid वास्तव में नियंत्रण की आईडी दिखा रहा है इसलिए मैंने सोचा कि यह काम करेगा। लेकिन हां, जावास्क्रिप्ट की मेरी समझदार समझ मुझे बताती है कि मैं दायरे से बाहर हूं या कुछ ऐसे बकवास जहां मैं तत्व तक नहीं पहुंच सकता।

एक बार जब मैं इसे प्राप्त कर लेता हूं, तो मुझे बिल्कुल यकीन नहीं है कि इस डेटा को फ़ॉर्म में कैसे पहुंचाया जाए।

किसी भी मदद की बहुत सराहना की जाती है।

अद्यतन मूल बिट काम कर रहा है, अब मुझे यह जानने की जरूरत है कि नए नियंत्रक से डेटा को मेरे नियंत्रक में कैसे प्राप्त किया जाए। यहां अपडेट किए गए नए jsfiddle का एक लिंक है। http://jsfiddle.net/tmZDY/1/

अद्यतन 2 मुझे लगता है कि मैं कैसे इस डेटा सुलभ बनाने के लिए, लेकिन जावास्क्रिप्ट की मेरी कमी ज्ञान मुझे फिर से सूखी छोड़ दिया है पर एक विचार है।

जब मैं ऑब्जेक्ट बनाता हूं तो मैं इसे करता हूं।

var elDatepicker = element.datetimepicker({ 
language : 'en', 
pick12HourFormat : true, 
}); 

हालांकि, जब मैं इस ऑब्जेक्ट का उपयोग करने की कोशिश करता हूं तो यह सही नहीं लगता है, या मुझे कुछ बुनियादी ज्ञान याद आ रहा है। किसी भी तरह से यह सुनिश्चित है कि मुझे मूर्ख महसूस हो रहा है।

console.log(elDatepicker.getDate()); 

यह विफल हो जाता है, getDate वास्तव में एक विधि है, कम से कम ऐसा लगता है कि यह प्लगइन के कोड में है।

Answer 1

एक अलग दायरे के बजाय, आप find() अपने टेम्पलेट के पहले div और फिर datetimepicker() लागू कर सकते हैं।तो अगर आप अपने HTML में id जरूरत नहीं:

<datepicker model="mydate"></datepicker> 
mydate = {{mydate}} 

मैं भी replace: true सुझाव देते हैं:

.directive('datepicker', function ($parse) { 
    return { 
     restrict: 'E', 
     replace: true, 
     template: '<div class=\"well\"><div class=\"input-append\">' 
     + '<input data-format=\"MM/dd/yyyy HH:mm:ss PP\" type=\"text\"></input>' 
     + '<span class=\"add-on\"><i data-time-icon=\"icon-time\" data-date-icon=\"icon-calendar\"></i></span>' 
     + '</div></div>', 
     link: function (scope, element, attr) { 
      var picker = element.find('div').datetimepicker({ 
       language: 'en', 
       pick12HourFormat: true 
      }); 
      var model = $parse(attrs.model); 
      picker.on('changeDate', function(e) { 
       console.log(e.date.toString()); 
       console.log(e.localDate.toString()); 
       model.assign(scope, e.date.toString()); 
       scope.$apply(); 
      }); 
     } 
    }; 
}) 

Fiddle

$parse थोड़ा मुश्किल है। जो मैं दिखाता हूं वह मुख्य उपयोग केस है: हम एक विशेषता को पार्स करते हैं और उस फ़ंक्शन को वापस लेते हैं जिसमें assign() विधि है जो हमें स्कोप प्रॉपर्टी को बदलने की अनुमति देती है।

Answer 2

ऐसा करने का एक तरीका यह हो सकता है, जैसा कि इस पहेली में दिखाया गया है। http://jsfiddle.net/uwC9k/10/

datepicker तत्व टेम्पलेट स्ट्रिंग के साथ प्रतिस्थापित किया जाना है, यह संकलन फ़ंक्शन का उपयोग करने के लिए एक अच्छा उपयोग केस होगा। तो संकलन फ़ंक्शन के अंदर टेम्पलेट स्ट्रिंग के साथ datepicker तत्व को प्रतिस्थापित कर रहा हूं।

एक बार शिकायत हो जाने के बाद, हम लिंक फ़ंक्शन पर जाएंगे, जो कुछ भी नहीं है लेकिन फ़ंक्शन संकलन फ़ंक्शन के अंदर से लौटाया गया है। क्या जोड़ने समारोह करेंगे

element.datetimepicker({ 
         language: 'en', 
         pick12HourFormat: true 
       }); 

का उपयोग कर आप jQuery शामिल कर रहे हैं के बाद से दिनांक पिकर कार्यक्षमता के साथ इस <div class=\"input-append\"> तत्व को प्रारंभ करने के लिए है, को जोड़ने समारोह में तत्व विशेषता एक jQuery warpped तत्व है। तो आप सीधे datetimepicker विधि को कॉल कर सकते हैं।

Answer 3

आप div को datetimepicker जैसे वर्ग जोड़ सकते हैं जिसे डेटाेटिमेकर में परिवर्तित किया जाना है, फिर उस वर्ग का उपयोग तत्व के लिए देखने के लिए करें।

.directive('datepicker', function() { 
    return { 
     restrict: 'E', 
     template: '<div class=\"well\"><div id={{dpid}} class=\"input-append datetimepicker\"><input data-format=\"MM/dd/yyyy HH:mm:ss PP\" type=\"text\"></input> <span class=\"add-on\"><i data-time-icon=\"icon-time\" data-date-icon=\"icon-calendar\">  </i> </span> </div></div>', 
     scope: { dpid: '@'}, 
     link: function(scope, element, attr) { 
      attr.$observe('dpid', function(value) { 
       if(value) { 
       $(element).find('.datetimepicker').datetimepicker({ 
        language: 'en', 
        pick12HourFormat: true 
      }); 
       } 
      }); 
     } 
    }; 
}) 

डेमो: Fiddle