angularjs - 除了一个单元格及其角边距外，如何使整行可点击？

Question

假设我有一排看起来像

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

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

以下是我所知道的解决方案，没有一个很好：

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

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

Answer 1

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

控制器：

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/

Answer 2

这个怎么样？

<tr>
  <td style="cursor: pointer;" ng-click="alert('hello1')">John</td>
  <td style="cursor: pointer;" ng-click="alert('hello2')">Smith</td>
  <td>Approved?<input type="checkbox"/></td>
</tr>