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

【问题标题】：Angular UI Bootstrap Modal Dialog Close EventAngular UI Bootstrap 模态对话框关闭事件
【发布时间】：2013-12-29 14:00:55
【问题描述】：

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

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

【问题讨论】：

你能解释一下为什么承诺不足以解决这个问题吗？这正是它的目的:)
如果你放弃最明显和最正确的解决问题的方法，至少尝试提供一些解释来支持你的决定。
@Stewie 非常好。我将研究使用诺言。编辑了有关不使用承诺的问题部分。

标签： angularjs modal-dialog angular-ui-bootstrap

【解决方案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/ 没有记录这种方式......但我发现它好多了。您现在可以使用该页面的控制器或使用带有控制器的特定控制器作为语法。如果您想在 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>

【讨论】：

// 未调用...至少对我而言。从模态成功提交后，您的这部分代码将被调用。它基本上是 $modalInstance.result.then(success, error/cancel)
@wakurth 实际上它没有记录，因为它不是 bootstrap-ui 本身的一部分，您只是使用原始数据属性样式的引导模式界面。 getbootstrap.com/javascript/#modals
在$modalInstance.result.then 中，您可以访问调用modal 的父容器元素吗？我问这个是因为我现在正在努力解决这个问题。
嗨 wakurth，你能回答这个问题吗stackoverflow.com/questions/43583136/…

【解决方案2】：

我完成了以下代码：

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

这样可以避免then()方法

【讨论】：

这仍然是一个承诺。看不出比典型方式有任何优势。
这对我最有效！我连接了一个通用的模式服务，使用result 承诺进行清理很有意义。谢谢！
嗨，Rafael Motta，你能回答这个问题吗stackoverflow.com/questions/43583136/…

【解决方案3】：

这对我有用：

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

【讨论】：

finally 会比then 更好地捕捉到他们点击模式。