CODEWITHSUNDEEP
javascriptangularjsangular-ui-bootstrappopover
davidpodhola
davidpodhola

Reputation: 1065

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!

Upvotes: 0

Views: 1090

Answers (2)

ashfaq.p
ashfaq.p

Reputation: 5487

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

Upvotes: 1

AranS
AranS

Reputation: 1891

First of all, move your logic to your controller. Then add $scope.$apply() to force a $digest cycle (you are using jQuery which is a 3rd party, not an angular built-in mechanism).

Like this:

controller

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

Upvotes: 1

Related Questions