davidpodhola davidpodhola - 1 year ago 65
AngularJS Question

Angular UI Bootstrap Popover - How to close an popover with ESC

I searched the questions and answers, tried different approaches (e.g.

$('#element').popover('hide')
) and I am still unable to close a Bootstrap popover with ESC button.

I would (falsely) assume this should work

$(document).keyup(function (event) {
if (event.which === 27) {
alert( "esc");
$scope.isOpen = false;
}
});


, but it is not.

I prepared a plunker.

Thanks a lot!

Answer

As Aran said, this is related to the digest cycle issue as the change is not detected by angular.

Here is a working plunker: http://plnkr.co/edit/M3F7dmmLBrtGdBCICdLm?p=preview

Make sure to use $scope.$digest as it will automatically enforce $apply

$scope.save = function () {
  $scope.isOpen = false;
  $scope.$digest();
};

$(document).keyup(function (event) {
    if (event.which === 27) {
      $scope.save();
    }
});