单击包装复选框时，不要触发父元素的ng-click

Question

在AngularJS中，我有一个带有ng-click属性的表格行。它用于显示包含有关表项的详细信息的对话框。此外，每个表格行都有一个复选框，用于选择批处理项目（例如删除）。

<tr ng-repeat="item in items..." href="#detailDialog"
    data-toggle="modal" ng-click="openDialog(...)">
  <td style="text-align: center;">
      <input type="checkbox" ng-model="item.checked" />
  </td>
  <td>{{ item.foo }}</td>
  <td>{{ item.bar }}</td>
</tr>

但是，当我单击该复选框时，也会触发父表行的ng-click事件。我该如何防止这种情况发生？我只想在用户点击表格行而不是复选框时打开对话框。

除了将ng-click绑定到单个单元格之外，还有其他选项吗？

Answer 1

我认为你需要在你的复选框输入上点击一下，然后你可以应用$ event.stopPropogation来阻止点击事件冒泡到行。你必须测试，但我认为这可能是正在发生的事情。