如何使用 AngularJS 将单击和双击控件添加到一行？答案

【问题标题】：How can I add a click and double click control to a row with AngularJS?如何使用 AngularJS 将单击和双击控件添加到一行？
【发布时间】：2014-01-23 16:00:58
【问题描述】：

如果我有 AngularJS HTML 可以创建一个像这样的 table：

<tbody>
   <tr data-ng-repeat="row in grid.data">
      <td>{{ row.id }}</td>
      <td>{{ row.text }}</td>
   </tr>
</tbody>

如何添加功能，以便单击一行使该行突出显示，两次单击调用带有row.id 的函数？有没有AngularJS 的方法可以做到这一点，还是我必须使用jQuery？我怀疑这样做的唯一方法是使用jQuery，但我觉得我应该先问AngularJS 问题。

谢谢

【问题讨论】：

您可以使用ngClick 和ngDblclick。你能提供一个 plunker 或 jsfiddle 吗？
我需要把它放在每个单元格上还是放在行上？
我才意识到。单击一下，我只想使我单击的一行突出显示并删除任何以前的突出显示。我认为这可能更难实现。

标签： javascript jquery html angularjs

【解决方案1】：

我从 Jquery 的网站上找到了以下内容：

" 不建议将处理程序绑定到同一元素的 click 和 dblclick 事件。触发的事件顺序因浏览器而异，有些在 dblclick 之前接收两个点击事件，而另一些只接收一个。 "

最好你能找到另一种方式来实现它，例如使用鼠标悬停和单击事件来聚集而不是单击和双击来聚集。

【讨论】：

【解决方案2】：

最好的方法可能是先去那里：

Handling ng-click and ng-dblclick on the same element with AngularJS

为了处理单击和双击问题。看这里：http://plnkr.co/edit/on260PrRZ5mZqHOK6NXW?p=preview

【讨论】：

【解决方案3】：

Angular 本身有一个内置的[ng-click][1] 指令。

我会考虑使用它。不过，我猜你必须自己构建双击功能。

这应该非常简单，可以与 ng-click 触发函数结合使用。只需等待 x 秒即可确定用户是否完成了 2 次点击。

编辑：过失，我不知道 ngdblclick

【讨论】：

我怎样才能使它只有我点击的行被突出显示，而所有其他行都失去突出显示。你认为这可以用 Angular 完成吗？
当然。我将从创建一个适合您需求的指令开始。例如，该指令可以与所有实例共享范围，并且您可以在单击时添加和删除一些 css 类属性。不过，有很多方法可以做到这一点。如果你不熟悉指令，我强烈推荐一些关于这个主题的讲座:)