web-dev-qa-db-fra.com

Comment fermer l'interface modulaire angulaire de n'importe où

J'utilise le dialogue modal d'amorçage Angular UI et le crée au sein d'un service:

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
        }
    };
}]);

Comment puis-je fermer toutes les instances modales lorsque j'appelle ModalService.close() depuis un contrôleur ou autre?

angularjsangular-uiangular-ui-bootstrapangularjs-service
38
DonJuwe

Injectez le service $modalStack et appelez la fonction $modalStack.dismissAll(), voir le code sur GitHub pour plus de détails:

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);
        }
    };
}]);
85
apairet

C'est comme ça que je l'ai fait fonctionner dans mon projet sans utiliser aucune usine ni code supplémentaire.

  //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();

J'ai une fonction de délai d'attente qui émet une déconnexion en tant que $rootScope.$emit('logout'); et l'auditeur de mon service est le suivant:

$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  

                });

Je ne sais pas si c'est la bonne approche, mais ça marche pour moi.

0
Sri7

J'ai ajouté la ligne ci-dessous pour empêcher le routage du bouton Précédent du navigateur et la fermeture de la fenêtre contextuelle. Nous devons injecter $ modalStack dans le contrôleur angulaire.

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

J'ai résolu ce problème dans une question similaire ailleurs. Je dirais que ça vaut vraiment le coup.

https://stackoverflow.com/a/50605541/8471992

0
B3none