AngularJS 클릭 stopPropagation

 

질문 : AngularJS 클릭 stopPropagation

---

테이블 행에 클릭 이벤트가 있고이 행에는 클릭 이벤트가있는 삭제 버튼도 있습니다. 삭제 버튼을 클릭하면 행의 클릭 이벤트도 시작됩니다.

다음은 내 코드입니다.

<tbody>
  <tr ng-repeat="user in users" class="repeat-animation" ng-click="showUser(user, $index)">
      <td>{{user.firstname}}</td>
      <td>{{user.lastname}}</td>
      <td>{{user.email}}</td>
      <td><button class="btn red btn-sm" ng-click="deleteUser(user.id, $index)">Delete</button></td>
    </tr>
</tbody>
                

테이블 셀에서 삭제 버튼을 클릭 할 때 showUser 이벤트가 발생하지 않도록하려면 어떻게해야합니까?

답변

---

ngClick 지시문 (및 기타 모든 이벤트 지시문)은 동일한 범위에서 사용할 수있는 $event 이 변수는 JS event stopPropagation() 을 호출하는 데 사용할 수 있습니다.

<table>
  <tr ng-repeat="user in users" ng-click="showUser(user)">
    <td>{{user.firstname}}</td>
    <td>{{user.lastname}}</td>
    <td>
      <button class="btn" ng-click="deleteUser(user.id, $index); $event.stopPropagation();">
        Delete
      </button>
    </td>              
  </tr>
</table>

PLUNKER

출처 : https://stackoverflow.com/questions/20300866/angularjs-ng-click-stoppropagation