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

Question

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

我会（错误地）认为这应该工作

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

，但事实并非如此。

我准备了a plunker。

非常感谢！

Answer 1

正如阿兰表示，随着变化不是由角度检测这是关系到摘要循环问题。

这里是一个工作plunker：http://plnkr.co/edit/M3F7dmmLBrtGdBCICdLm?p=preview

确保使用$ $范围消化，因为它会自动强制执行申请$

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

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

Answer 2

首先，将您的逻辑移动到您的控制器。然后添加$scope.$apply()以强制$digest周期（您正在使用jQuery这是第三方，而不是角度内置机制）。

像这样：

控制器

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