angularjs - example - ¿Hay alguna forma de cerrar automáticamente el modo de la interfaz de usuario angular cuando la ruta cambia?

plunker angularjs editor

Question

Tengo enlaces en plantillas dentro de modales. Cuando hago clic en ellos, la página actual cambia, pero la superposición y el modo permanecen. Podría agregar ng-click="dimiss()" a todos los enlaces en todas las plantillas en modales, pero ¿hay alguna manera mejor? ¿Por ejemplo, para cerrarlo automáticamente en un cambio de ruta exitoso o agregar solo un ng-click por plantilla para manejar todos los enlaces?

Answer 1

Estoy manteniendo esta lógica en el controlador modal. Puedes escuchar el evento $locationChangeStart y cerrar el modal allí. También es bueno eliminar la escucha después, especialmente si ha registrado una escucha en $rootScope :

angular.module(''MainApp'').controller(''ModalCtrl'',[''$scope'',''$uibModalInstance'',
function ($scope, $uibModalInstance) {

  var dismissModalListener = $scope.$on(''$locationChangeStart'', function () {
    $uibModalInstance.close();
  });

  $scope.$on(''$destroy'', function() {
    dismissModalListener();
  });

}]);

Answer 2

Realmente no uso Angular UI Bootstrap, pero al mirar los docs , parece que hay un método close() en el objeto $modalInstance .

Así que tomando el ejemplo de la docs , esto debería funcionar:

var ModalInstanceCtrl = function ($scope, $modalInstance, items) {
    $scope.items = items;
    $scope.selected = {
        item: $scope.items[0]
    };
    $scope.ok = function () {
        $modalInstance.close($scope.selected.item);
    };
    $scope.cancel = function () {
        $modalInstance.dismiss(''cancel'');
    };

    // this will listen for route changes and call the callback
    $scope.$on(''$routeChangeStart'', function(){
        $modalInstance.close();
    });
};

Espero que ayude.

Answer 3

Resolví este problema haciendo algo como esto:

$rootScope.$on(''$stateChangeSuccess'',
function(event, toState, toParams, fromState, fromParams){
$modalStack.dismissAll();
});

Answer 4

Si desea que todos los modales abiertos se cierren cada vez que se cambie una ruta con éxito, puede hacerlo en un lugar central escuchando el evento $routeChangeSuccess , por ejemplo, en un bloque de ejecución de su aplicación:

var myApp = angular.module(''app'', []).run(function($rootScope, $uibModalStack) {
  $uibModalStack.dismissAll();
}); 

Aquí puede ver que se inyecta el servicio $uibModalStack en el que puede llamar al método de dismissAll : esta llamada cerrará todos los modales abiertos actualmente.

Entonces, sí, puedes manejar los modales que se cierran centralmente, en un lugar, con una línea de código :-)

Answer 5

Una mejor manera es ver que cada vez que se abre una ventana emergente (Modal), al hacer clic en el botón Atrás del navegador (o en la parte posterior del teclado), detenemos el cambio de URL y simplemente cerramos la ventana emergente. Esto funciona para una mejor experiencia de usuario en mi proyecto.

El botón Atrás del navegador funciona normalmente si no hay un Modal abierto.

utilizar:

$uibModalStack.dismiss(openedModal.key);

o

$uibModalStack.dismissAll;

Código de muestra:

.run([''$rootScope'', ''$uibModalStack'',
    function ($rootScope,  $uibModalStack) {       
        // close the opened modal on location change.
        $rootScope.$on(''$locationChangeStart'', function ($event) {
            var openedModal = $uibModalStack.getTop();
            if (openedModal) {
                if (!!$event.preventDefault) {
                    $event.preventDefault();
                }
                if (!!$event.stopPropagation) {
                    $event.stopPropagation();
                }
                $uibModalStack.dismiss(openedModal.key);
            }
        });
    }]);

Answer 6

verifique la condición de la ruta respectiva en el evento $stateChangeSuccess y luego cierre los modales de inicio de sesión abiertos globalmente usando la clase como esta:

$rootScope.$on(''$stateChangeSuccess'',
function(event, toState, toParams, fromState, fromParams){
//hide any open bootstrap modals
  angular.element(''.inmodal'').hide();
});

Si desea ocultar otros modales, como el diálogo de material angular ( $mdDialog ) y el diálogo de alerta dulce, use angular.element(''.modal-dialog'').hide(); & angular.element(''.sweet-alert'').hide();