13

How do I detect when an Angular UI Bootstrap modal dialog is closed?

I need to know when the dialog closes so I can broadcast a loginCancelled event using the angular-http-auth library to prevent my Angular UI from hanging, especially after closing the modal via clicking on the backdrop.

3
  • 2
    Can you explain why the promise isn't sufficient for this? That's exactly what it's intended for :) Commented Dec 29, 2013 at 17:33
  • If you're discarding the most obvious and correct way of solving the problem than at least try and provide some explanation behind your decision. Commented Dec 29, 2013 at 18:32
  • @Stewie very well. I shall look into using the promise. Redacted part in question about not using the promise. Commented Dec 30, 2013 at 8:08

3 Answers 3

16

This works for clicking on the backdrop and pressing the esc key if you are opting in on that.

var modalInstance = $modal.open({
    templateUrl: '/app/yourtemplate.html',
    controller: ModalInstanceCtrl,
    windowClass: 'modal',
    keyboard: true,
    resolve: {
        yourResulst: function () {
            return 'foo';
        }
    }
});

var ModalInstanceCtrl = function ($scope, $modalInstance, yourResulst) {

    var constructor = function () {
       // init stuff
    }

    constructor();

    $modalInstance.result.then(function () {
        // not called... at least for me
    }, function () {
        // hit's here... clean up or do whatever
    });

    // VVVV other $scope functions and so on...

};

UPDATE: alternative approach

I have no idea why this way is not documented at http://angular-ui.github.io/bootstrap/ ... but I find it much better. You can now use that page's controller or use a specific controller with the controller as syntax. You could even utilize ng-include for the content of the modal, if you want separation on html. The following works with no JS needed in the controller to setup/configure the modal, as long as you have bootstrap/bootstrapUI included in your project/site

<div class="row">

    <button class="btn btn-default" data-toggle="modal" data-target="#exampleModal">Open Example Modal</button>

</div>

<div class="modal fade" id="exampleModal" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">Close</button>
                <h2 class="modal-title" id="exampleModalLabel">Modal Example</h2>
            </div>
            <div class="modal-body" style="padding-bottom:0px;">

                <h3>model markup goes here</h3>

            </div>
        </div>
    </div>
</div>
Sign up to request clarification or add additional context in comments.

4 Comments

// not called... at least for me. This section of your code will be called after successfully submitting from the modal. Its basically $modalInstance.result.then(success, error/cancel)
@wakurth Acutally it's not documented because it's not a part of bootstrap-ui itself, you're just using the original data-attribute-styled bootstrap modal interface. getbootstrap.com/javascript/#modals
in the $modalInstance.result.then, can you get access to the parent container element that called the modal ? I'm asking this because I'm struggling with this issue right now.
Hi wakurth, can you answer this question stackoverflow.com/questions/43583136/…
13

I finished with the following code:

$modal.open(modalOptions).result.finally(function(){
  console.log('modal has closed');
});

This way you can avoid the method then()

3 Comments

It's still a promise. Can't see any advantages over typical way.
This works best for me! I have a common modal service wired up, and it makes a lot of sense to clean up with the result promise. Thanks!
Hi Rafael Motta, can you answer this question stackoverflow.com/questions/43583136/…
0

This worked for me:

var modalInstance = $modal.open({...});
        modalInstance.result.then(function () {
            //something to do on close
        });

1 Comment

finally would be better than then to catch them clicking off of the modal as well.

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.