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.

Gil Birman · Accepted Answer · 2014-06-19 05:10:02Z

1

+100

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();
            }

answered Jun 19, 2014 at 5:10

Gil Birman

36k15 gold badges78 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Aaron Over a year ago

Thanks, I don't know how I missed that part before! With regards to the code complexity, it's ui-bootstrap-tooltip, changed to support isolate scope, and changed again to make a simple-ish Plunkr example. It's over-complicated for the Plunkr, but not for my code base.

Shomz · Accepted Answer · 2014-06-15 22:58:44Z

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.

answered Jun 15, 2014 at 22:58

Shomz

37.7k4 gold badges61 silver badges87 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related