$apply already in progress - tooltip

[jacobscarter]

I am using $tooltipProvider.setTriggers()

I have created my custom triggers and am trying to use them, below is my code:

//app.js
app.config(['$tooltipProvider'], function($tooltipProvider){
    $tooltipProvider.setTriggers({
        'show' : 'hide'
    });
});

//html
<p ng-mouseenter="checkCondition ($event)" ng-mouseleave="destroyPopover ()" popover-trigger="show">text</p>

//controller
$scope.checkCondition = function(event) {
    if(checking condition logic) {
        angular.element(event.target).trigger('show');
    }
};

$scope.destroyPopover = function(event){
    angular.element(event.target).trigger('hide');
};

On mouse enter I get the following error:

$apply already in progress at show (https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap-tpls.js:2615:23)

How can I use custom triggers inside Angular without interfering with the digest cycle your code is triggering?

[catsbergers]

I had exactly the same issue. Wrap in a $timeout to make the event asynchronous - that way it will play nice with the digest cycle. (You'll need to inject $timeout into your controller).

$scope.destroyPopover = function(event){
    $timeout(function () {
        angular.element(event.target).trigger('hide');
    }, 0);
};

[jacobscarter]

Thanks so much for the advice!