angularjs ng-click inside ng-click - $event.stopPropagation()

북마크 추가

 

 

 

 

 

     

 

 

 

 

 

 

 

 

 

 

 

 

 

table을 예로 들면

 

<tr ng-click="a()">        

<td ng-click="b()"></td>

<td></td>                    

<td></td>                    

<td></td>​                    

</tr>                         

.

.

.

 

 

<tr> 태그에 ng-click="a()"라는 함수가 걸려있고 (보라색부분)<td>에 ng-click="b()"라는 함수가 걸려 있다면(초록색부분)

td를 클릭했을때tr태그에 걸려있는 ng-click도 적용되어 a()함수가 같이 호출된다.

 ng-click안에 ng-click이 들어가 있는 상황에서하위 ng-click을 적용되게 하고 싶다면 $event.stopPropagation() 을 사용하면된다. 

 

용방법:: <td ng-click="b(); $event.stopPropagation();">

이렇게 하면 tr에 적용된 ng-click="a();"는 실행되지 않는다.

 

row안에 있는 checkbox나 button등에도 사용 할 수 있다.

 

checkbox의 경우 tr에 ng-click이 걸려 있으면 checked, unchecked시 호출이 되는데

 

<td ng-click="$event.stopPropagation();">

<input type="checkbox">

 

</td>                                                   

위와 같이 해주면 체크박스를 클릭할때 tr의 ng-click이 호출 되는것을 막을 수 있다.

 

DEMO 바로가기 :: http://trandent.com/jsTest/13321320143767

 

 

 

 

 

 

 

HKH
2014-08-11 07:49
SHARE
keyboard_arrow_left
keyboard_arrow_up