10

I'm using the modal compoenent from Bootstrap UI (https://angular-ui.github.io/bootstrap/) in Angular to render a modal, and on closing I want to be able to redirect to another state, or at least have a function be called.

The problem is I can intercept the close event but whenever I user presses Esc the modal is dismissed and I couldn't find any documentation of catching the dismiss event or assigning a function to the promise that is returned.

The code is as follows:

var modalInstance = $uibModal.open({
  templateUrl: 'a-template.html',
  controller: 'AnotherCtrl',
  controllerAs: 'modal',
  backdrop: false,
  size: 'lg'
});

// I am able to catch this whenever the user exits the modal in an
// orthodox fashion. Doesn't happen when he presses Esc button.
modalInstance.closed = function () {
  $state.go(homeState); 
};

Alternatively another solution that would suit my business case would be to simply not allow the user to dismiss the modal. And close it myself whenever an event happens in the modal controller. I neither found functionality for this so far.

1 Answer 1

23

In the controller associated with the modal ("AnotherCtrl" or "modal" for you), you can use $scope.$on() with the 'modal.closing' event.

Example:

var modalInstance = $uibModal.open({
  templateUrl: 'a-template.html',
  controller: ['$scope', function($scope){
    $scope.$on('modal.closing', function(event, reason, closed){
        if('condition for not closing')
            event.preventDefault(); //You can use this to prevent the modal from closing            
        else
            window.location = "https://www.youtube.com/watch?v=dQw4w9WgXcQ";            
    });
  }],
  controllerAs: 'modal',
  backdrop: false,
  size: 'lg'
});
5
  • 4
    Good solid video for the else condition. Highly recommend
    – NDavis
    Dec 13, 2016 at 17:40
  • it gives me a syntax error (lack of ')') but once solved it worked like a charm May 18, 2017 at 19:46
  • Thank you. Could you explain how you knew to intercept the modal.closing event ? I spent serveral hours with various combinations of preventing the original escape keypress/keydown/keyup event propogation with no success. It's incredibly frustrating that the natural way of fixing this does not work, and you need some other magic out of left field for it to function.
    – user467257
    Mar 14, 2018 at 8:40
  • 1
    @user467257 If you go to the Angular Bootstrap docs for modals, it has the events that might be emitted at the bottom. modal.closing is listed as the event broadcast for a normal closing, and they explain that preventDefault() can be called to keep the modal open.
    – Harris
    Mar 14, 2018 at 15:04
  • Thanks again. The link does not work though, it should be angular-ui.github.io/bootstrap/#modal (their wonderful framework seems to be inserting an extra "!#" when going to the anchor which then means it doesnt work if the url is copied. Very clever!)
    – user467257
    Mar 15, 2018 at 11:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.