Angularjs 角度UI引导模式对话框关闭事件

Angularjs 角度UI引导模式对话框关闭事件,angularjs,modal-dialog,angular-ui-bootstrap,Angularjs,Modal Dialog,Angular Ui Bootstrap,如何检测模式对话框何时关闭 我需要知道对话框何时关闭,以便我可以使用库广播一个loginCancelled事件,以防止我的角度用户界面挂起,特别是在通过单击背景关闭模式后。这适用于单击背景并按下esc键(如果您选择了该选项) var modalInstance = $modal.open({ templateUrl: '/app/yourtemplate.html', controller: ModalInstanceCtrl, windowClass: 'modal',

如何检测模式对话框何时关闭


我需要知道对话框何时关闭,以便我可以使用库广播一个
loginCancelled
事件,以防止我的角度用户界面挂起,特别是在通过单击背景关闭模式后。

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

};
更新:替代方法

我不知道为什么这种方式没有记录在。。。但我觉得好多了。现在可以使用该页的控制器,也可以使用特定的控制器,并将控制器作为语法。如果您希望在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>

开放示例模式
接近
模态示例
模型标记在这里

我完成了以下代码:

$modal.open(modalOptions).result.finally(function(){
  console.log('modal has closed');
});
这样,您就可以避免使用then()方法。

这对我来说很有效:

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

你能解释一下为什么这个承诺不够吗?这正是它的用意:)如果你放弃了最明显、最正确的解决问题的方法,那么至少试着为你的决定提供一些解释。@Stewie很好。我将研究如何履行诺言。修改了有关不使用承诺的部分//未调用。。。至少对我来说。成功从模式提交后,将调用代码的这一部分。它基本上是$modalInstance.result.then(success,error/cancel)@wakurth Acutally它没有文档记录,因为它不是引导ui本身的一部分,您只是使用原始数据属性样式的引导模式接口。在
$modalInstance.result.then
中,您可以访问调用模态的父容器元素吗?我问这个问题是因为我现在正在努力解决这个问题。嗨,瓦库斯,你能回答这个问题吗?这仍然是一个承诺。我看不出比传统方式有什么优势。这对我最合适!我有一个连接的公共模式服务,用
结果
承诺进行清理非常有意义。谢谢嗨,拉斐尔·莫塔,你能回答这个问题吗?
最后
然后
更能抓住他们在模态上的点击。