角UI引导模态对话框关闭事件

问题描述

如何检测时href=\"https://github.com/angular-ui/bootstrap\">角UI引导的模式对话框的

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

我需要知道什么时候该对话框关闭，所以我可以使用的库prevent我从挂，尤其是通过点击背景关闭模式后角UI。

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.

推荐答案

这适用于点击背景和pressing如果你是在说选择加入esc键。

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

};

更新：可供选择的方法。

我不知道为什么这样，是不是在 http://angular-ui.github.io/bootstrap/ ...但我觉得好多了。现在，您可以使用该页面的控制器或使用特定的控制器，该控制器为语法。你甚至可以利用NG-包括对模式的内容，如果你想在HTML的分离。没有在控制器中设置所需JS以下工作/配置模式，只要你有引导bootstrapUI /包含在你的项目/网站

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>

这篇关于角UI引导模态对话框关闭事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！