AngularJS में अपने स्वयं के कार्यक्रम श्रोताओं को कैसे पंजीकृत करें?

Question

मैं अपने स्वयं के ईवेंट श्रोताओं को एंगुलरजेएस ऐप में कैसे पंजीकृत करूं?

विशिष्ट होने के लिए, मैं ड्रैग एंड ड्रॉप (डीएनडी) श्रोताओं को पंजीकृत करने की कोशिश कर रहा हूं ताकि जब मेरे दृश्य के नए स्थान पर कुछ खींचा और गिरा दिया जाए, तो AngularJS व्यापार तर्क को पुन: गणना करता है और मॉडल और फिर दृश्य को अद्यतन करता है।

Answer 1

निर्देशन में ईवेंट हैंडलिंग और डोम हेरफेर छुपाएं कोणीय तरीके से बहुत अधिक है। कॉलिंग स्कोप। $ जब कोई इवेंट आग दृश्य को अपडेट करने के लिए कोणीय को बताता है तो लागू होता है।

आप in this sample तरह jQuery ui को विचार कर सकते हैं (angular wiki of examples मैं angular-ui समूह के साथ काम करते हैं और वहाँ एक साधारण घटना आवरण जो आपके लिए उपयोगी हो सकता है।

Answer 2

एक घटना श्रोता जोड़ना जोड़ने विधि में किया जा जाएगा निर्देश के तहत। नीचे मैंने बुनियादी निर्देशों के कुछ उदाहरण लिखे हैं। हालांकि, यदि आप jquery-ui's .draggable() और .droppable() का उपयोग करना चाहते हैं, तो आप क्या कर सकते हैं यह पता है कि elemlink में पैरा नीचे प्रत्येक निर्देश वास्तव में एक jQuery ऑब्जेक्ट है। तो आप elem.draggable() पर कॉल कर सकते हैं और जो भी आप वहां करने जा रहे हैं वह करें।

यहाँ एक निर्देश के साथ कोणीय में dragstart बंधन का एक उदाहरण है:

app.directive('draggableThing', function(){ 
    return { 
     restrict: 'A', //attribute only 
     link: function(scope, elem, attr, ctrl) { 
     elem.bind('dragstart', function(e) { 
      //do something here. 
     }); 
     } 
    }; 
}); 

यहाँ आप कि कैसे उपयोग करेंगे।

<div draggable-thing>This is draggable.</div> 

एक div या कोणीय के साथ कुछ करने के लिए ड्रॉप बंधन का एक उदाहरण।

app.directive('droppableArea', function() { 
    return { 
     restrict: 'A', 
     link: function(scope, elem, attr, ctrl) { 
      elem.bind('drop', function(e) { 
       /* do something here */ 
      }); 
     } 
    }; 
}); 

यहां बताया गया है कि आप इसका उपयोग कैसे करेंगे।

<div droppable-area>Drop stuff here</div> 

मुझे उम्मीद है कि इससे मदद मिलती है।

Answer 3

बेन द्वारा अच्छा समाधान लेकिन ध्यान रखें कि आपको originalEvent और मूल तत्व तक पहुंचने की आवश्यकता होगी। मोज़िला प्रलेखन के अनुसार दो शर्तों को पूरा करना होगा https://developer.mozilla.org/en-US/docs/DragDrop/Drag_Operations

1. खींचने योग्य dragstart के लिए सच
2. श्रोता है

तो निर्देश लग सकता है इस

app.directive('draggableThing', function() { 
    return function(scope, element, attr) { 
     var pureJsElement = element[0]; 
     pureJsElement.draggable = true; 
     element.bind('dragstart', function(event) { 
      event.originalEvent.dataTransfer.setData('text/plain', 
           'This text may be dragged'); 
     //do something here. 
     }); 
    } 
}); 

कदम उदाहरण के द्वारा एक अच्छा कदम की तरह कुछ यहां उपलब्ध है http://blog.parkji.co.uk/2013/08/11/native-drag-and-drop-in-angularjs.html