Saltar al contenido

Angularjs Bootstrap llamada de cierre modal al hacer clic fuera / esc

Solución:

Sí tu puedes. Provoca un evento de desestimación y la promesa se rechaza en ese caso. Además, tenga en cuenta que el $modal.open() El método devuelve un objeto que tiene un result propiedad que es una promesa.

Con la promesa puedes …

//This will run when modal dismisses itself when clicked outside or
//when you explicitly dismiss the modal using .dismiss function.
$scope.theModal.result.catch(function(){
    //Do stuff with respect to dismissal
});

//Runs when modal is closed without being dismissed, i.e when you close it
//via $scope.theModal.close(...);
$scope.theModal.result.then(function(datapassedinwhileclosing){
    //Do stuff with respect to closure
});

como atajo podrías escribir:

 $scope.theModal.result.then(doClosureFn, doDismissFn);

Ver ref.

El método abierto devuelve una instancia modal, un objeto con las siguientes propiedades:

  • close (resultado): un método que se puede usar para cerrar un modal, pasando un resultado
  • despedir (motivo): un método que se puede utilizar para descartar un modal, pasando un motivo
  • resultado: una promesa que se resuelve cuando un modal se cierra y se rechaza cuando se descarta un modal
  • open – una promesa que se resuelve cuando se abre un modal después de descargar la plantilla de contenido y resolver todas las variables ‘renderizadas’ – una promesa que se resuelve cuando se renderiza un modal.

Pregunta anterior, pero si desea agregar cuadros de diálogo de confirmación en varias acciones de cierre, agregue esto a su controlador de instancia modal:

$scope.$on('modal.closing', function(event, reason, closed) {
    console.log('modal.closing: ' + (closed ? 'close' : 'dismiss') + '(' + reason + ')');
    var message = "You are about to leave the edit view. Uncaught reason. Are you sure?";
    switch (reason){
        // clicked outside
        case "backdrop click":
            message = "Any changes will be lost, are you sure?";
            break;

        // cancel button
        case "cancel":
            message = "Any changes will be lost, are you sure?";
            break;

        // escape key
        case "escape key press":
            message = "Any changes will be lost, are you sure?";
            break;
    }
    if (!confirm(message)) {
        event.preventDefault();
    }
});

Tengo un botón de cierre en la parte superior derecha del mío, que activa la acción “cancelar”. Al hacer clic en el fondo (si está habilitado), se activa la acción de cancelación. Puede usar eso para usar diferentes mensajes para varios eventos cercanos. Pensé en compartirlo en caso de que sea útil para otros.

Puede utilizar la promesa de “resultado” devuelta por el método $ modal.open (). Como abajo:

 $scope.toggleModal = function () {
      $scope.theModal = $modal.open({
          animation: true,
          templateUrl: 'pages/templates/modal.html',
          size: "sm",
          scope: $scope
      });

      $scope.theModal.result.then(function(){
          console.log("Modal Closed!!!");
      }, function(){
          console.log("Modal Dismissed!!!");
      });
 }

También puede usar la devolución de llamada “finalmente” de la promesa de “resultado” como se muestra a continuación:

     $scope.theModal.result.finally(function(){
          console.log("Modal Closed!!!");
      });
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *