Question

我试图在用户点击youtube图像时创建BootStrap模态窗口（通过调用playMideo（）方法将showModal变量设置为true）。

由于我在“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

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

Answer 1

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

演示 Plunker

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

1 个答案: