Prevent multiple popover windows open in angularJS

Question

How can I prevent to have multiple popover windows open? There should only be one open at a time. Please see my punkr: http://plnkr.co/edit/MjP1AlygixXHEOC3Jd5a

Within my plunkr, I use an updated ui-bootstrap 0.10 from jbruni (his plunkr is here: http://plnkr.co/edit/B2wEis?p=info)

When hovering about the two windows there is a chance that two popup windows are open at the same time. :(

Answer 1

If you force off the animation, then the turn off delay seems to work. Not a clean solution but sort of works. You still have a chance to get two popovers at once since there is no function to delay the start of a new popover if there is one pending the turn off.

http://plnkr.co/edit/a8XHo7FKhrqv37mWTPBk?p=info

            if ( scope.tt_animation ) {
//                transitionTimeout = $timeout(removeTooltip, 500);
                  setTimeout(function(){scope.tt_animation=false;hide();},500);
              } else if ( scope.tt_popdown ){
                vanishTimeout = $timeout(removeTooltip, 2000);
              } else {0
                removeTooltip();
              }

Answer 2

I have written a directive that wraps a popover control and uses the popover-is-open to trigger the popover opening and closeing.

To close any open popovers I trigger a custom event on the parent scope:

$scope.openPopup = function()
{
    $scope.$parent.$broadcast("multiSelectSinglePopoverInstanceEvent", {});
    $scope.isPopupOpen = !$scope.isPopupOpen;
}

In the custom popover controls controller I handle the event by closing the popover:

$scope.$on("multiSelectSinglePopoverInstanceEvent", function (event, args) {
    $scope.isPopupOpen = false;
});

This may help