Bootstrap 模态对话框 AngularJS 键盘关闭事件回调答案

【问题标题】：Bootstrap Modal Dialog AngularJS Keyboard Close Event CallbackBootstrap 模态对话框 AngularJS 键盘关闭事件回调
【发布时间】：2013-12-29 06:16:34
【问题描述】：

我正在尝试在用户单击 youtube 图像时创建 BootStrap Modal 窗口（通过调用将 showModal 变量设置为 true 的 playVideo() 方法）..

由于我在“showModal”变量上设置了观察者，因此会显示 Bootstrap 模式。

    $scope.showModal = false;

    $scope.playVideo = function(video) {
        $scope.showModal = true;
        $scope.selectedVideo = video;
    };

    $scope.closeVideo = function(video) {
        $scope.showModal = false;
    };


myApp.directive("userDataRefresh", function(){
    return function (scope, element, attrs){
        scope.$watch("showModal",  function(newValue, oldValue){
        if(newValue == true)
        {

            $("#tfVideo").on("show.bs.modal", function() {
                console.log("Listener for Bootstrap called just before the Modal Shown...");
              });

              $('#tfModal').on('shown.bs.modal', function (e) {
                console.log("Listener for Bootstrap called after the Modal Shown...");
              })

              $('#tfModal').on('hidden.bs.modal', function (e) {
                console.log("Listener for Bootstrap called after the Modal Dismissed...");
              })

              $('#tfModal').modal({

              });
          }
       }, true);
    }
  });

只有当我单击模态窗口上的“关闭”按钮时，我才能关闭并重新打开一个新的模态窗口。

但是，如果我在模态窗口打开时按键盘“ESC”键，单击任何其他图像都不会再打开模态窗口！

我尝试在单击“关闭”按钮时调用的“模态窗口”关闭事件（'hidden.bs.modal'）方法中调用“scope.closeVideo()”

$('#tfModal').on('hidden.bs.modal', function (e) {
    console.log("Listener for Bootstrap called after the Modal Dismissed...");
    scope.closeVideo();
})

但这似乎也不起作用..

JS Fiddle

在调用范围上的方法时，有人可以指导我在使用关闭模式对话框回调/时出错的地方吗？我需要通过使用键盘“ESC”来使模态对话框工作，就像单击“关闭”按钮时它的工作方式一样。请帮忙！

【问题讨论】：

标签： angularjs twitter-bootstrap

【解决方案1】：

为什么不使用 UI Bootstrap for Angular。这里ESC会默认关闭模态。

演示Plunker

【讨论】：