1

我的页面中有一个非常简单的代码剪辑器，我有一个跨度。将鼠标悬停在这个跨度上会显示一个我正在使用 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 调用将为所有跨度触发. 这是我不打算拥有的。

知道如何在这里实现去抖动功能吗？

4

3 回答 3

0

popover-is-open 属性是在 0.13.4 版本下添加的，可用于查看 popover 的状态，如下所示：

<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 属性。

于 2015-11-09T12:45:37.663 回答
0

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

于 2015-11-08T22:08:54.727 回答
0

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

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

有点骇人听闻，但目前无法定义在 ui-bootstrap 弹出窗口中打开和关闭时调用的函数。

于 2018-01-26T19:49:30.770 回答