angularjs - modal - ui-bootstrap-tpls




Existe-t-il un moyen de fermer automatiquement le modal Angular UI Bootstrap lorsque l’itinéraire change? (4)

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

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

J'ai des liens dans les modèles dans les modaux. Lorsque je clique dessus, la page en cours change, mais la superposition et le mode restent. Je pourrais ajouter ng-click="dimiss()" à chaque lien de tous les modèles dans les modaux, mais existe-t-il un meilleur moyen? Par exemple, pour le fermer automatiquement lors d’un changement de route réussi ou pour n’ajouter qu’un ng-click par modèle pour gérer tous les liens?


Je garde cette logique dans le contrôleur modal. Vous pouvez écouter l’événement $locationChangeStart et y fermer le modal. Il est également utile de supprimer le programme d'écoute après, surtout si vous avez enregistré un programme d'écoute 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();
  });

}]);

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

Ici, vous pouvez voir que le service $uibModalStack est injecté et que vous pouvez appeler la méthode dismissAll . Cet appel ferme tous les modaux actuellement ouverts.

Donc, oui, vous pouvez gérer la fermeture des modaux de manière centralisée, au même endroit, avec une seule ligne de code :-)


Une meilleure solution consiste à vérifier que, chaque fois qu'un Popup (Modal) est ouvert, lorsque vous cliquez sur le bouton Précédent du navigateur (ou sur le retour du clavier), nous arrêtons le changement d'URL et fermons simplement le Popup. Cela fonctionne pour une meilleure expérience utilisateur dans mon projet.

Le bouton Précédent du navigateur 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);
            }
        });
    }]);




angular-ui-bootstrap