javascript - ngbmodule - ngx-bootstrap

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

Question

Estoy usando el modal Angular-ui/bootstrap en mi proyecto.

Aquí está mi modal:

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

Uno puede cerrar el modal haciendo clic en el botón ESC o haciendo clic fuera del área modal. ¿Hay una manera de ejecutar una función cuando esto sucede? No estoy muy seguro de cómo atrapar el tipo de cierre.

Sé que puedo descartar manualmente un modal al tener un ng-click="closeModal()" como este:

$scope.closeModal = function () {
$scope.theModal.dismiss(''cancel'');
};

Si alguien pudiera ayudar, sería muy apreciado.

Answer 1

Pregunta anterior, pero si desea agregar diálogos 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 de la mía, que activa la acción "cancelar". Al hacer clic en el fondo (si está habilitado), se activa la acción de cancelación. Puedes usar eso para usar diferentes mensajes para varios eventos cercanos. Pensé que compartiría en caso de que sea útil para otros.

Answer 2

Puede usar 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 promesa de "devolver" el "resultado" de la siguiente manera:

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

Answer 3

Sí tu puedes. Provoca un evento de despido y la promesa es rechazada en ese caso. Además, tenga en cuenta que el $modal.open() devuelve un objeto que tiene una propiedad de result 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:

• cerrar (resultado): un método que se puede usar para cerrar un modal, pasando un resultado
• descartar (razón): un método que se puede usar para descartar un modal, pasando una razón
• resultado - una promesa que se resuelve cuando se cierra un modal y se rechaza cuando se descarta un modal
• abierto: una promesa que se resuelve cuando se abre un modal después de descargar la plantilla de contenido y resolver todas las variables "representadas": una promesa que se resuelve cuando se representa un modal.