Angularjs 除了一个单元格及其边距外，如何使整行都可以单击？

假设我有一排像

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

约翰
史密斯
经核准的？

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

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

整行：

。使所有单元格和页边距都可单击，并且只需要一个

ng click

条目，但复选框会导致执行“go（）”，这是错误的

每个单元格：

…

。赞成：可以限制到我想要的单元格。缺点：大量重复（不干燥），并且遗漏了边距

整行带有特殊的“go”fn:

，但“go”知道如何区分不同的单元格。赞成者：正是这样。缺点：在专门的控制器操作中需要大量的视图/html知识

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

这如何

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

约翰
史密斯
经核准的？

您可以使用两个单击处理程序，一个用于整个

tr

，第二个用于最后一个

td

'复选框。在第二次使用

事件
的方法

控制器：

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>


约翰·史密斯
经核准的？

工作示例：
这不会让用户感到困惑吗？我的意思是一方面对整行进行操作，另一方面对复选框进行操作？也许一个简单的按钮在一个额外的专栏会做的把戏，更容易理解第一眼。我喜欢它
e.stopPropagation（）
应防止事件冒泡。