Angular UI Bootstrap 弹出窗口 - 如何使用 ESC 关闭弹出窗口

Question

我搜索了问题和答案，尝试了不同的方法（例如 $('#element').popover('hide')），但我仍然无法使用 ESC 按钮关闭 Bootstrap 弹出窗口。

我会（错误地）认为这应该有效

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

，但事实并非如此。

我准备了a plunker。

非常感谢！

Answer 1

首先，将逻辑移至控制器。然后添加 $scope.$apply() 以强制执行 $digest 循环（您正在使用 jQuery 这是第 3 方，而不是 angular 内置机制）。

像这样：

控制器

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

Answer 2

正如 Aran 所说，这与摘要周期问题有关，因为 angular 未检测到更改。

这是一个正在工作的插件：http://plnkr.co/edit/M3F7dmmLBrtGdBCICdLm?p=preview

确保使用 $scope.$digest 因为它会自动执行 $apply

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

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

Angular UI Bootstrap 弹出窗口 - 如何使用 ESC 关闭弹出窗口

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

javascript

angularjs

angular-ui-bootstrap

popover