Angular UI Bootstrap Popover - 如何使用 ESC 关闭弹出框答案

【问题标题】：Angular UI Bootstrap Popover - How to close an popover with ESCAngular UI Bootstrap Popover - 如何使用 ESC 关闭弹出框
【发布时间】：2016-06-23 08:41:22
【问题描述】：

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

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

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

，但事实并非如此。

我准备好了a plunker。

非常感谢！

【问题讨论】：

你想只在 esc 按下时关闭它吗？
其他关闭弹出框的方法（点击外部，按钮等）正在工作。所以在这里关闭 esc 就足够了，谢谢。
检查 plunker 看它是否正常工作。
ng-keypress 也可能是一个选项

标签： javascript angularjs angular-ui-bootstrap popover

【解决方案1】：

正如 Aran 所说，这与摘要周期问题有关，因为角度未检测到变化。

这是一个正常工作的插件：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();
    }
});

【讨论】：

【解决方案2】：

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

像这样：

控制器

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

【讨论】：