从ng-click获取原始元素

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在指令中处理函数中的click事件，将其$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操作？

angularjs angularjs-directive

— 奥兹里克斯
source

Answers:

317

您需要$event.currentTarget代替$event.target。

— 工程师
source

谢谢，它正在工作。奇怪的是$ event对象中的currentTarget属性设置为null。

— Ozrix 2014年

这绝对是奇怪的...如果您记录$ event对象，则$ event.currentTarget看起来为null。但是，如果您记录$ event.currentTarget引用，它将显示正确的元素。

— richardaday

我通常会用var elem = $event.currentTarget || $event.srcElement。它总是更加跨浏览友好，但我不知道它是否必要。

— WebWanderer

console.log在执行的最后状态显示深度可变的对象，而不是在调用console.log的状态。参见stackoverflow.com/questions/22059811/…–

— Tivie

不是直接回答这个问题，而是将“问题” $event.currentTarget显然设置为空。

这是由于console.log在执行的最后状态而不是在console.log被调用的状态下显示了深可变的对象。

您可以检查此以获取更多信息：连续调用console.log会产生不一致的结果

— 蒂维
source