angularjs - 如何使除一个单元格及其 Angular 边距之外的整行可点击？

Question

假设我有一行看起来像

<tr>
  <td>John</td>
  <td>Smith</td>
  <td>Approved?<input type="checkbox"/></td>
</tr>

每一行显示一名员工，并允许您检查以批准/拒绝该员工(例如注册类(class))。我希望用户能够单击该行上的任意位置以获取有关员工的更多详细信息，但如果他们单击最后一列(“已批准？”)，则不应显示更多详细信息，因为它应该只更改复选框.

以下是我所知道的解决方案，但都不是很好:

1. 整行:<tr class="clickable" ng-click="go()"> 。使所有单元格和边距都可点击，并且只需要一个ng-click条目，但复选框会导致“go()”执行，这是不好的。
2. 每个单元格:<td class="clickable" ng-click="go()">...<td class="clickable" ng-click="go()"> 。优点:可以限制为我想要的单元格。缺点:大量重复(不干)，并且错过了边距。
3. 整行带有特殊的“go”fn:<tr class="clickable" ng-click="go()"> ，但是“go”知道如何区分不同的细胞。优点:效果完全一样。缺点:在专门的 Controller 操作中需要大量的 View /html 知识。

如何使前 2 列及其边距可点击，但第三列或其边距不可点击？

Answer 1

您可以使用两个点击处理程序，一个用于整个 tr ，第二个用于最后一个 td' 复选框。在第二个中使用 Event 的 stopPropagation方法。

Controller :

var TableCtrl = function($scope){
    $scope.click1 = function(){
        console.log("Click 1 method")
    }
    $scope.click2 = function(e){
        console.log("Click 2 method");
        e.stopPropagation();
    }
}

标记:

<table ng-controller="TableCtrl">
<tr ng-click="click1()">
  <td>John</td>  <td>Smith</td>
  <td>Approved?<input type="checkbox" ng-click="click2($event)"/></td>
</tr>
</table>

工作示例:http://jsfiddle.net/zDMQB/1/