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

Question

我如何检测 Angular UI Bootstrap模态对话框已关闭？

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

Answer 1

这适用于单击背景并按 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...

};

更新 : 替代方法

我不知道为什么这种方式没有记录在 http://angular-ui.github.io/bootstrap/ ……但我觉得好多了。您现在可以使用该页面的 Controller 或使用特定 Controller 和 Controller 作为语法。如果您想在 html 上进行分离，您甚至可以将 ng-include 用于模式的内容。只要您的项目/站点中包含 bootstrap/bootstrapUI， Controller 中就不需要 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>