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내 지시문 의 함수에서 클릭 이벤트를 처리하여 클릭 $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

— 오즈 릭스
소스

답변:

317

$event.currentTarget대신에 필요 합니다 $event.target.

— 공학자
소스

고마워요. $ event 객체의 currentTarget 속성이 null로 설정되어있는 것은 이상합니다.

— Ozrix

$ 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분명히 null로 설정됩니다.

console.log가 호출 된 상태가 아니라 마지막 실행 상태에서 console.log가 변경 가능한 깊은 오브젝트를 표시하기 때문입니다.

자세한 내용은이를 확인할 수 있습니다. console.log에 대한 연속 호출로 일관성없는 결과가 생성됩니다.

— 티비
소스