在使用 angular-ui-bootstrap 显示弹出窗口之前或之后调用回调 [英] Invoking a callback before or after showing a popover using angular-ui-bootstrap

问题描述

我的页面中有一个非常简单的代码截图，我有一个跨度.将鼠标悬停在此跨度上会显示一个弹出窗口，我正在为其使用 angular-ui-bootstrap.

I have a very simple code snipper in my page where I have a span. Hovering over this span displays a popover for which I am using 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 调用将针对所有跨度被触发.这是我不打算拥有的.

Basically I have written a function which makes and API call when the user hovers over this span. The problem here is that let's say I have 10 span tags one below the other and the user quickly moves from 1st span to 10th span (in the process hovering over all 8 spans in between), the API call will get triggered for all the spans. This is what I do not intend to have.

知道如何在此处实现去抖动功能吗?

Any idea how can I implement the debounce functionality here?

推荐答案

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

Depending on your use, I found the best method is to simply add ng-mouseover, ng-click etc to the element and define a function to be called.

您甚至可以创建一个变量并将其即时附加到该对象作用域以跟踪状态(打开关闭).

You can even create a variable and attach it to that objects scope on the fly to keep track of the state (open close).

有点笨拙，但目前无法定义在 ui-bootstrap 弹出窗口中打开和关闭时调用的函数.

Kind of hacky, but there is currently no way to define a function that is called on open and on close within ui-bootstrap popover.

这篇关于在使用 angular-ui-bootstrap 显示弹出窗口之前或之后调用回调的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！