|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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
