How can I trigger an angularjs event handler from another handler?

Question

I'm using AngularJS 1.3.0-beta.2, jQuery 2.1.0, Angular UI 0.11, and my custom version of Angular UI's Tooltip widget, and I want buttons within my tooltip to close the tooltip when clicked.

Plunkr

The key part is at crud_tooltip.js:372:

  scope.closePopup = function() {
    var trigger = element.prev();
    if (scope.mode === 'timeout') {
      $timeout(function() {
        trigger.triggerHandler('click');
      });
    }
    else {
      trigger.triggerHandler('click');
    }
  };

The version using $timeout works, but there's a noticeable delay between clicking the button and seeing the popup close.

The version not using $timeout gives an error: [$rootScope:inprog] $apply already in progress . It then closes the popup anyway... I'm not sure why.

How can I modify closePopup (or the ng-click that calls it) to make the tooltip close immediately when the user clicks the button within the tooltip?

Note: I adapted my custom_tooltip.js code from Angular UI's tooltip code, using this Plunker as a guideline. I've also tried directly changing the tt_isOpen value and defining a new crudtooltip-toggle attribute, both with very limited success.

Answer 1

You're looking at the wrong thing.

That delay is coming from elsewhere and is definitely not bound to the $timeout, but also to the notimeout method (ignoring the error, of course, but that can be easily fixed by checking for $scope.$$phase first).

Also, when you click the original links, both of them, the closing delay is there.

So, in 4 cases you get the same delay, which means it's something in the code. I'll give it another look and update the answer if I find what's causing it.

Answer 2

Maybe I'm missing the point, but your code seems incredibly complicated and convoluted for such simply functionality. In any case, the delay is actually due to a $timeout which is waiting for some animation to finish. The timeout is triggered because scope.tt_animation evaluates to truthy. Simply changing the timeout to 0 at line 258 of crud_tooltip.js fixes the issue. See this plunk

Here's the problem area:

            if ( scope.tt_animation ) {
              transitionTimeout = $timeout(removeTooltip, 500);
            } else {
              removeTooltip();
            }