एनजी-क्लिक से मूल तत्व प्राप्त करें


204

मेरे पास ng-clickउनके साथ जुड़ी वस्तुओं की एक सूची है:

<ul id="team-filters">
    <li ng-click="foo($event, team)" ng-repeat="team in teams">
         <img src="{{team.logoSmall}}" alt="{{team.name}}" title="{{team.name}}">
    </li>
</ul>

मैं fooअपने निर्देशन में फ़ंक्शन में क्लिक घटनाओं को संभाल रहा हूं , $eventउस ऑब्जेक्ट के संदर्भ के रूप में गुजर रहा है, जिसे क्लिक किया गया है, लेकिन मुझे imgटैग के बजाय टैग का संदर्भ मिल रहा है li। मैं तो पाने के लिए इस तरह से सामान है li:

$scope.foo = function($event, team) {
   var el = (function(){
       if ($event.target.nodeName === 'IMG') {
          return angular.element($event.target).parent(); // get li
       } else {
          return angular.element($event.target);          // is li
       }
   })();

क्या ng-clickमेरे निर्देशन में DOM संचालन किए बिना, उस तत्व का संदर्भ प्राप्त करने का एक सरल तरीका है ?

जवाबों:


317

आप की जरूरत $event.currentTargetके बजाय $event.target


3
धन्यवाद, यह काम कर रहा है। यह अजीब है कि $ घटना ऑब्जेक्ट में currentTarget संपत्ति शून्य पर सेट है।
ओजिक्स

2
यह निश्चित रूप से अजीब है ... यदि आप $ घटना ऑब्जेक्ट को लॉग करते हैं, तो $ घटना .CurrentTarget शून्य लगती है। हालाँकि, यदि आप $ event.currentTarget संदर्भ लॉग करते हैं, तो यह सही तत्व दिखाता है।
ऋचादादय

6
मैं आमतौर पर उपयोग करूंगा var elem = $event.currentTarget || $event.srcElement। यह हमेशा अधिक क्रॉस-ब्राउज़ अनुकूल रहा है, फिर भी मुझे नहीं पता कि क्या इसकी आवश्यकता है।
वेबवंडर

12
कंसोल.लॉग अंतिम अंतिम निष्पादन की वस्तुओं को दिखाता है, राज्य के निष्पादन के समय नहीं, जब कंसोल.लॉग कहा जाता था। देखें stackoverflow.com/questions/22059811/…
Tivie

13

इस सवाल का सीधा जवाब नहीं है, बल्कि $event.currentTargetस्पष्ट रूप से "मुद्दे" को शून्य करने के लिए सेट किया गया है।

यह इस तथ्य के कारण है कि कंसोल.लॉग निष्पादन की अंतिम स्थिति में गहरी उत्परिवर्तनीय वस्तुओं को दिखाता है, उस स्थिति में नहीं जब कंसोल को बुलाया गया था।

आप इसे अधिक जानकारी के लिए देख सकते हैं: कंसोल पर लगातार कॉल। असंगत परिणाम उत्पन्न करते हैं

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.