web-dev-qa-db-ja.com

Angular UI Bootstrap Modal Dialog Close Event

Angular UI Bootstrap モーダルダイアログが閉じられたことをどのように検出しますか？

angular-http-auth ライブラリを使用してloginCancelledイベントをブロードキャストし、Angular UIが特に背景をクリックしてモーダルを閉じた後、ぶら下がっています。

angularjsmodal-dialogangular-ui-bootstrap
13
Petrus Theron

これは、背景をクリックしてそれを選択している場合は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 [〜＃〜]：代替アプローチ

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

私は次のコードで終了しました：

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

このようにすると、then（）メソッドを回避できます

10
Rafael Motta

これは私のために働きました：

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