Existe-t-il un moyen de fermer automatiquement le modal de Bootstrap de l’interface utilisateur angular lorsque la route change?

J’ai des liens dans les modèles à l’intérieur des modaux. Lorsque je clique dessus, la page en cours change, mais la superposition et le modal restnt. Je pourrais append ng-click="dimiss()" à tous les liens de tous les modèles des modaux, mais y a-t-il une meilleure solution? Par exemple, pour le fermer automatiquement en cas de changement de route réussi ou append un seul ng-click par modèle pour gérer tous les liens?

Si vous souhaitez que tous les modaux ouverts soient fermés chaque fois qu’un itinéraire est modifié avec succès, vous pouvez le faire dans un emplacement central en écoutant l’événement $routeChangeSuccess , par exemple dans un bloc d’exécution de votre application:

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

Vous pouvez voir ici que le service $uibModalStack est injecté sur lequel vous pouvez appeler la méthode dismissAll – cet appel ferme tous les modaux actuellement ouverts.

Donc, oui, vous pouvez gérer les modaux de manière centralisée, en un seul endroit, avec une seule ligne de code 🙂

Un meilleur moyen est de voir que chaque fois qu’une fenêtre contextuelle (modale) est ouverte, sur le bouton du navigateur, cliquez sur (ou sur Retour du clavier), nous arrêtons le changement d’URL et fermons simplement le menu contextuel. Cela fonctionne pour une meilleure expérience utilisateur dans mon projet.

Le bouton Navigateur Retour fonctionne normalement s’il n’y a pas de Modal ouvert.

utilisation:

 $uibModalStack.dismiss(openedModal.key); 

ou

 $uibModalStack.dismissAll; 

Exemple de code:

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

En fait, je n’utilise pas le Bootstrap d’interface utilisateur angular, mais en regardant les documents , il semble qu’il y ait une méthode close() sur l’object $modalInstance .

Donc, en prenant l’exemple des documents , cela devrait fonctionner:

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

J’espère que cela pourra aider.

J’ai résolu ce problème en faisant quelque chose comme ceci:

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

Je garde cette logique dans le contrôleur modal. Vous pouvez écouter l’événement $locationChangeStart et y fermer le modal. Il est également bon de supprimer listener après, surtout si vous avez enregistré un écouteur sur $rootScope :

 angular.module('MainApp').controller('ModalCtrl',['$scope','$uibModalInstance', function ($scope, $uibModalInstance) { var dismissModalListener = $scope.$on('$locationChangeStart', function () { $uibModalInstance.close(); }); $scope.$on('$destroy', function() { dismissModalListener(); }); }]); 

vérifiez la condition de route respective dans l’événement $stateChangeSuccess , puis fermez globalement les modaux de démarrage ouverts en utilisant la classe comme ceci:

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

Si vous souhaitez masquer d’autres modaux tels que le dialog de matériau angular ( $mdDialog ) et le dialog d’alerte douce, utilisez angular.element('.modal-dialog').hide(); & angular.element('.sweet-alert').hide();