Invoking a callback before or after showing a popo

Question

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>

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?

Answer 1

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).

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.

Answer 2

The popover-is-open attribute was added under the 0.13.4 release that can be used to watch the state of your popover like so:

<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>

Then in your controller:

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

But if you are just trying to keep the popovers from opening so quickly, consider using the popover-open-delay attribute.

Answer 3

Use a delay, like one second, after the mouse enters the region, then if the mouse hasn't entered another area, make the API call.