web-dev-qa-db-fra.com

Comment attraper un événement de clic de fond quand on clique sur modal bootstrap d'interface utilisateur angulaire?

Dans mon application, il utilise la fonction $modal.open() pour ouvrir une fenêtre contextuelle modale qui utilise une autre page comme modèle. En cliquant sur le bouton, la fenêtre contextuelle modale est affichée. Si je clique sur le bouton Annuler, la fonction est appelée et fonctionne également correctement.

    $scope.cancel=function(){
    });

Mais si l'utilisateur clique en dehors de la fenêtre contextuelle modale, nous ne pouvons pas capturer cet événement avec ce code.

    $scope.dismiss=function(){
    });

Comment puis-je attraper cet événement?

J'ai vu de nombreux articles sur AngularJS, mais je n'ai pas trouvé de solution à cela.

javascriptangularjsangular-ui-bootstrap
19
user3506670

$modal.open() renvoie un objet avec une promesse. Vous pouvez utiliser la promesse, l'enchaîner et la manipuler. Lorsque vous cliquez sur le fond à l'extérieur, une dismiss est créée en interne et la promesse est rejetée.

ex:-

var instance = $modal.open(...);

 instance.result.then(function(){
  //Get triggers when modal is closed
 }, function(){
  //gets triggers when modal is dismissed.
 });

Si vous utilisez ceci dans l'enfant où $modalInstance est injecté, vous pouvez également le faire ici. Donc, fondamentalement, plutôt que de traiter avec event, cela vous aide à le faire à un niveau supérieur à l'aide de promesses.

32
PSL

Vous pouvez utiliser 

backdrop: 'static'

dans vos options. Comme ça:

var modalInstance = $modal.open({
    templateUrl: 'myModalContent.html',
    controller: 'ModalInstanceCtrl',
    backdrop: 'static',
    ...
});

La documentation Bootstrap 3.0 explique que backdrop: 'static' spécifie un fond ne rejetant pas le modal au clic.

7
Tavousi

J'ai eu le même problème avec la Angular Mobile UI Demo (1.2). Cependant, dans les fichiers de démonstration, le modal n'est pas déclaré dans le JS principal.

Au lieu de cela, le simple fait d’ajouter deux variables à in modal1.html.

<div class="modal-dialog" ui-outer-click="Ui.turnOff('modal1')" ui-outer-click-if="Ui.active('modal1')">

Ceci est expliqué ici: http://mobileangularui.com/docs/#outer-click

Les deux propriétés sont nécessaires pour que cela fonctionne.

1
MarsAndBack

Attrapez tous les clics sur le document html et fermez le modal.

Attrapez les clics dans le modal et arrêtez la propagation.

c'est à dire.

$("html").on("click",closemodal());

$(".modal").on("click",function(event){
   event.stopPropagation();
}
1
QuinnFTW