Question

我的页面中有一个非常简单的代码片段，我有一个跨度。将鼠标悬停在此跨度上会显示一个弹出框，我正在使用angular-ui-bootstrap。

<span uib-popover="This is a popover from Akhilesh"
              ng-mouseenter="vm.logToConsole('I am trying hard...')"
              popover-trigger="mouseenter">Hover over me to see a popup..!!</span>

基本上我编写了一个函数，当用户将鼠标悬停在此范围内时，它会调用API。这里的问题是，假设我有一个低于另一个的10个跨度标签，用户快速从第一个跨度移动到第10个跨度（在此过程中悬停在其间的所有8个跨度上），API调用将被触发所有跨度。这是我不想要的。

任何想法如何在这里实现去抖功能？

Answer 1

在鼠标进入区域后使用延迟，例如一秒钟，然后如果鼠标没有进入另一个区域，请进行API调用。

Answer 2

在0.13.4版本下添加了popover-is-open属性，可用于监视弹出框的状态，如下所示：

<span uib-popover="This is a popover from Akhilesh"
          popover-is-open="vm.isOpen"
          popover-trigger="mouseenter">Hover over me to see a popup..!!</span>

然后在你的控制器中：

$scope.$watch('isOpen', function() { });

但是如果你只是想让弹出窗口快速打开，可以考虑使用popover-open-delay属性。

Answer 3

根据您的使用情况，我发现最好的方法是简单地将ng-mouseover，ng-click等添加到元素中并定义要调用的函数。

您甚至可以创建变量并将其附加到该对象范围，以跟踪状态（打开关闭）。

有点hacky，但目前无法定义在ui-bootstrap popover中打开和关闭时调用的函数。

在使用angular-ui-bootstrap显示弹出窗口之前或之后调用回调

3 个答案: