web-dev-qa-db-fra.com

Angular UI Bootstrap Modal Dialog Close Event

Comment détecter quand une boîte de dialogue Angular UI Bootstrap modal est fermée?

J'ai besoin de savoir quand le dialogue se ferme pour pouvoir diffuser un événement loginCancelled à l'aide de la bibliothèque angular-http-auth afin d'empêcher que mon Angular -UI ne se bloque, surtout après la fermeture du modal en cliquant sur toile de fond.

angularjsmodal-dialogangular-ui-bootstrap
13
Petrus Theron

Cela fonctionne pour cliquer sur le fond et appuyer sur la touche echap si vous optez pour cela.

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: approche alternative

Je n'ai aucune idée pourquoi cette méthode n'est pas documentée sur http://angular-ui.github.io/bootstrap/ ... mais je la trouve beaucoup mieux. Vous pouvez maintenant utiliser le contrôleur de cette page ou utiliser un contrôleur spécifique avec le contrôleur comme syntaxe. Vous pouvez même utiliser ng-include pour le contenu du modal, si vous souhaitez une séparation sur HTML. Ce qui suit fonctionne sans qu'aucun JS ne soit nécessaire dans le contrôleur pour installer/configurer le modal, à condition que vous ayez bootstrap/bootstrapUI inclus dans votre projet/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>
16
wakurth

J'ai fini avec le code suivant:

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

De cette façon, vous pouvez éviter la méthode then ()

9
Rafael Motta

Cela a fonctionné pour moi:

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