Angularjs中table中实现点击td中按钮不触发tr的点击事件

今天遇到个问题：

1、在table中，每一行有个checkbox，tr上设置了ng-click；

2、每一行最后又有一个按钮【详情】，按钮使用ui-sref设置了点击事件；

3、现在出现的问题是：点击【详情】按钮，同样会触发ng-click事件，即将复选框checkbox勾选上

 

经过网上查询和尝试，最后解决方案为：

1、将按钮的ui-sref换成ng-click；

2、在ng-click的方法中实现state的跳转，方法的传入参数增加$event;

3、使用angularjs的阻止冒泡方法$event.stopPropagation(),使点击事件不再派送。

 

在网上具体了解了下stopPropagation()方法，它的具体作用为：终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点

具体click方法如下：

function viewDetail(date,$event) {
    $state.go("state.view",{
        param1:date.param1,
        param2:date.param1
    });
    $event.stopPropagation();//阻止冒泡
}

button的设置：

<button ng-click="vm.viewDetail({param1:obj.param1,param1:obj.param2},$event)" type="submit" class="btn btn-primary btn-sm">
    <span class="glyphicon glyphicon-eye-open"></span>
    <span class="hidden-xs hidden-sm" data-translate="entity.action.view"></span>
</button>