angularjs - uib - Cómo cerrar Angular UI Modal desde cualquier lugar

uib-pagination angularjs

Question

Estoy usando el diálogo modal de arranque UI angular y lo creo dentro de un servicio:

myApp.factory(''ModalService'', [''$modal'', function($modal) {
    return {
        trigger: function(template) {
            $modal.open({
                templateUrl: template,
                size: ''lg'',
                controller: function($scope, $modalInstance) {
                    $scope.ok = function() {
                        $modalInstance.close($scope.selected.item);
                    };
                    $scope.cancel = function() {
                        $modalInstance.dismiss(''cancel'');
                    };
                }
            });
        },
        close: function() {
            // this should close all modal instances
        }
    };
}]);

¿Cómo puedo cerrar todas las instancias modales al llamar a ModalService.close() desde un controlador o en absoluto?

Answer 1

Agregué la línea a continuación para evitar el enrutamiento del botón de retroceso del navegador y el cierre de la ventana emergente. Necesitamos inyectar $ modalStack en el controlador angular.

event.preventDefault();
            $modalStack.dismissAll(''close'');

Answer 2

Así es como lo conseguí trabajando en mi proyecto sin utilizar ninguna fábrica o código adicional.

  //hide any open $mdDialog modals
  angular.element(''.modal-dialog'').hide();
  //hide any open bootstrap modals
  angular.element(''.inmodal'').hide();
  //hide any sweet alert modals
  angular.element(''.sweet-alert'').hide();

Tengo una función de tiempo de espera que emite el cierre de sesión como $rootScope.$emit(''logout''); y el oyente en mi servicio es el siguiente:

$rootScope.$on(''logout'', function () {
                    //hide any open $mdDialog modals
                    angular.element(''.modal-dialog'').hide();
                    //hide any open bootstrap modals
                    angular.element(''.inmodal'').hide();
                    //hide any sweet alert modals
                    angular.element(''.sweet-alert'').hide();

                    //do something else here  

                });

No sé si este es el enfoque correcto, pero funciona para mí.

Answer 3

Inyecte el servicio $modalStack y llame a la función $modalStack.dismissAll() , consulte el código en GitHub para obtener más detalles:

myApp.factory(''ModalService'', [''$modal'', ''$modalStack'' function($modal, $modalStack) {
    return {
        trigger: function(template) {
            $modal.open({
                templateUrl: template,
                size: ''lg'',
                controller: function($scope, $modalInstance) {
                    $scope.ok = function() {
                        $modalInstance.close($scope.selected.item);
                    };
                    $scope.cancel = function() {
                        $modalInstance.dismiss(''cancel'');
                    };
                }
            });
        },
        close: function(reason) {
            $modalStack.dismissAll(reason);
        }
    };
}]);