Comment fermer l’interface utilisateur modale de n’importe où

J’utilise le dialog modal bootstrap de l’interface utilisateur angular et le crée dans un service:

myApp.factory('ModalService', ['$modal', function($modal) { return { sortinggger: 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 ModalService.close() depuis un contrôleur ou quoi que ce soit?

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

 myApp.factory('ModalService', ['$modal', '$modalStack' function($modal, $modalStack) { return { sortinggger: 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); } }; }]); 

J’ai ajouté la ligne ci-dessous pour empêcher le bouton de retour du navigateur de router et de fermer la fenêtre contextuelle. Nous devons injecter $ modalStack dans le contrôleur angular.

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

C’est ainsi que je l’ai fait fonctionner dans mon projet sans utiliser de code d’usine ou 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 temporisation qui émet la déconnexion en tant que $rootScope.$emit('logout'); et l’auditeur dans mon service est comme suit:

 $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.