Angular UI Bootstrap模态对话框关闭事件

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

如何检测Angular UI Bootstrap模式对话框何时关闭？

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.

我需要知道对话框关闭的时间，以便我可以使用angular-http-auth库来广播loginCancelled事件，以防止我的Angular UI挂起，特别是在通过单击背景关闭模式之后。

3 个解决方案

#1

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

这适用于单击背景并按esc键，如果您选择了该键。

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

我不知道为什么这种方式没有记录在http://angular-ui.github.io/bootstrap/ ...但我觉得它好多了。您现在可以使用该页面的控制器或使用控制器的特定控制器作为语法。如果你想在html上分离，你甚至可以使用ng-include作为模态的内容。只要您的项目/站点中包含bootstrap / bootstrapUI，以下工作在控制器中无需JS就可以设置/配置模式

<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>

#2

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

This worked for me:

这对我有用：

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

#1