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.