How to close Angular UI Modal from anywhere

Question

I am using the Angular UI bootstrap modal dialog and create it within a 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
        }
    };
}]);

How can I close all modal instances when calling ModalService.close() from a controller or whatsoever?

Aventine

I am very appreciative for this post. I was able to refactor my code through it. Only difference is that i did use the resolve method that was similar to the docs to get data I was updating. – Dolabriform

Answer 1

Inject the $modalStack service and call the function $modalStack.dismissAll(), see the code on GitHub for details:

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

Konya

Thanks, works like a charm! I don't know why this is not mentioned in the docs github.com/angular-ui/bootstrap/tree/master/src/modal/docs – Aventine

@Aventine agreed, would be helpful like when closing a modal on $http success. – Worldweary

Thanks very much, their help was very important. +1 =) – Hasty

Awesome. It also works with AngularUI, just use $uibModalStack. – Rittenhouse

add comma in function arguments – Yeah

Answer 2

I added the below line to prevent browser back button routing and closing the popup. We need to inject $modalStack into angular controller.

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

Landing

Answer 3

This is how i got it working in my project without using any factory or additional code.

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

I have a timeout function that emits logout as $rootScope.$emit('logout'); and the listener in my service is as follows:

$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  

                });

I don't know if this is the right approach , but it works for me.

Taction