CODEWITHSUNDEEP
angularjstwitter-bootstrap
Satya
Satya

Reputation: 1037

Bootstrap Modal Dialog AngularJS Keyboard Close Event Callback

I am trying to create BootStrap Modal window up on the user click of a youtube image (by calling the playVideo() method which sets the showModal variable to true)..

Since I have watchers set up on the "showModal" variable, the Bootstrap modal is displayed.

    $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);
    }
  });

I am able to close and re-open a new modal window only if I click the "close" button on the modal window..

But, If I hit the keyboard "ESC" key while the modal window is open, clicking on any other image does not open the modal window any more!

I tried calling "scope.closeVideo()" from with in the "modal window" close event ('hidden.bs.modal') method which gets called when the "close" button is clicked

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

But that does not seem to work either..

JS Fiddle

Could some one guide me where I am going wrong with respect to using the close modal dialog callback / while calling the method on the scope? I need to have the modal dialog working by even using the keyboard "ESC" just like how it is working when the "Close" button is clicked. Please help!

Upvotes: 0

Views: 3308

Answers (1)

Maxim Shoustin
Maxim Shoustin

Reputation: 77904

Why do not use UI Bootstrap for Angular. Here ESC will close modal by default.

Demo Plunker

Upvotes: 1

Related Questions