कोणीय एनजी-क्लिक इवेंट प्रतिनिधिमंडल

Question

तो अगर मेरे पास 100 ली के साथ उल है तो प्रत्येक ली में एनजी-क्लिक होना चाहिए या क्या इस घटना को उल से बांधने का एक तरीका है और इसे ली के प्रकार के रूप में प्रस्तुत करना है जो jquery करता है ? क्या यह बेहतर या बदतर होगा? क्या हमारे पास 100 घटनाएं हैं या क्या यह अंत में सिर्फ एक घटना है?

Answer 1

ऐसा लगता है कि कोणीय दोहराने वालों के साथ घटना प्रतिनिधिमंडल नहीं करता है। किसी ने issue on github about it खोला। तर्क यह है कि अगर यह वास्तव में बेहतर प्रदर्शन की ओर जाता है।

कोई कामकाज हो सकता है लेकिन इसके लिए jQuery की आवश्यकता होगी। इसमें मूल तत्व पर उपयोग करने के लिए एक विशेष निर्देश बनाने और श्रोता को अपने डोम नोड पर पंजीकृत करने के होते हैं।

यहां एक उदाहरण है, जिसे बच्चों के नोड पर क्लिक करने के लिए एक फ़ंक्शन नाम कहा जाता है, और यह भी मदद करने के लिए एक चयनकर्ता को पास किया जाता है कि कौन से बच्चे नोड्स सुनना चाहते हैं। चूंकि कोणीय के jquery कार्यान्वयन केवल हमें bind विधि देता है - जो वास्तविक श्रोताओं को ईवेंट श्रोताओं को पंजीकृत करने तक सीमित है - हमें on या delegate विधि तक पहुंच प्राप्त करने के लिए jQuery लोड करने की आवश्यकता है।

एचटीएमएल

<ul click-children='fun' selector='li'> 
    <li ng-repeat="s in ss" data-index="{{$index}}">{{s}}</li> 
</ul> 

समारोह परिभाषित नियंत्रक में परिभाषित किया गया है और यह एक सूचकांक

$scope.fun = function(index){ 
    console.log('hi from controller', index, $scope.ss[index]);  
}; 

निर्देश $parse का उपयोग करता है एक समारोह है कि बुलाया जाएगा में एक अभिव्यक्ति कन्वर्ट करने के लिए पारित किया जा करने की उम्मीद घटना श्रोता से।

app.directive('clickChildren', function($parse){ 
    return { 
    restrict: 'A', 
    link: function(scope, element, attrs){  
     var selector = attrs.selector; 
     var fun = $parse(attrs.clickChildren); 
     element.on('click', selector, function(e){  
     // no need to create a jQuery object to get the attribute 
     var idx = e.target.getAttribute('data-index');   
     fun(scope)(idx);   
     }); 
    } 
    }; 
}); 

Plunker: http://plnkr.co/edit/yWCLvRSLCeshuw4j58JV?p=preview

---

नोट: कार्य अलग कार्यक्षेत्रों {fun: '&'} का उपयोग, जो एक नज़र लायक है निर्देशों को प्रत्यायोजित किया जा सकता है, लेकिन इस जटिलता बढ़ जाती है।

Answer 2

यहां जेएम-के उदाहरण का काम करना, मैंने इस निर्देश का एक संक्षिप्त और लचीला संस्करण लिखा है। सोचा था कि मैं साझा करूंगा। क्रेडिट जेएम-;

मेरा संस्करण फ़ंक्शन नाम को $ scope [fn] (e, डेटा) के रूप में कॉल करने का प्रयास करता है, या गहराई से विफल रहता है।

यह उस तत्व से वैकल्पिक जेसन ऑब्जेक्ट पास करता है जिसे क्लिक किया गया था। यह आपको कोणीय अभिव्यक्तियों का उपयोग करने और विधि के लिए कई गुणों को पारित करने की अनुमति देता है।

एचटीएमएल

<ul delegate-clicks="handleMenu" delegate-selector="a"> 
    <li ng-repeat="link in links"> 
    <a href="#" data-ng-json='{ "linkId": {{link.id}} }'>{{link.title}}</a> 
    </li> 
</ul> 

जावास्क्रिप्ट

नियंत्रक विधि

$scope.handleMenu = function($event, data) { 
    $event.preventDefault(); 
    $scope.activeLinkId = data.linkId; 
    console.log('handleMenu', data, $scope); 
} 

निर्देशक निर्माता

// The delegateClicks directive delegates click events to the selector provided in the delegate-selector attribute. 
// It will try to call the function provided in the delegate-clicks attribute. 
// Optionally, the target element can assign a data-ng-json attribute which represents a json object to pass into the function being called. 
// Example json attribute: <li data-ng-json='{"key":"{{scopeValue}}" }'></li> 
// Use case: Delegate click events within ng-repeater directives. 

app.directive('delegateClicks', function(){ 
    return function($scope, element, attrs) { 
    var fn = attrs.delegateClicks; 
    element.on('click', attrs.delegateSelector, function(e){ 
     var data = angular.fromJson(angular.element(e.target).data('ngJson') || undefined); 
     if(typeof $scope[ fn ] == "function") $scope[ fn ](e, data); 
    }); 
    }; 
}); 

मैं अगर किसी को योगदान करना चाहती प्रतिक्रिया जानने में खुशी होगी।

मैंने हैंडलमेनू विधि का परीक्षण नहीं किया क्योंकि मैंने इसे एक अधिक जटिल अनुप्रयोग से निकाला था।

Answer 3

ब्रैडग्रीन के प्रतिनिधि प्रतिनिधि से ऊपर, मैंने some code from georg को अनुकूलित किया है जो मुझे हैंडलमेनू फ़ंक्शन को $ स्कोप (उदा। $ Scope.tomato.handleMenu) में गहराई से रखने की अनुमति देता है।

app.directive('delegateClicks', function() { 
    return function ($scope, element, attrs) { 
     var fn = attrs.delegateClicks.split('.').reduce(function ($scope, p) { return $scope[p] }, $scope); 
     element.on('click', attrs.delegateSelector, function (e) { 
      var data = angular.fromJson(angular.element(e.target).data('ngJson') || undefined); 
      if (typeof fn == "function") fn(e, data); 
     }); 
    }; 
});