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?

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. — Winnemucca, Jun 21 '15 at 22:41

score 90 · Accepted Answer · edited Jun 02 '15 at 16:36

90

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

edited Jun 02 '15 at 16:36

DonJuwe

4,477
3
34
59

answered Aug 22 '14 at 11:37

apairet

3,162
20
23

5

Thanks, works like a charm! I don't know why this is not mentioned in the docs https://github.com/angular-ui/bootstrap/tree/master/src/modal/docs – DonJuwe Aug 22 '14 at 11:44
2

@DonJuwe agreed, would be helpful like when closing a modal on $http success. – cpk Nov 25 '14 at 17:10
Thanks very much, their help was very important. +1 =) – Anderson Silva Feb 08 '16 at 22:50
19

Awesome. It also works with AngularUI, just use `$uibModalStack`. – AndyTheEntity Mar 23 '16 at 09:18
add comma in function arguments – xkeshav Mar 09 '17 at 09:13

score 1 · Answer 2 · answered Nov 30 '16 at 09:57

1

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');

answered Nov 30 '16 at 09:57

Sudha

46
7

hakuna · Answer 3 · 2018-01-02T19:10:02.623

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.

How to close Angular UI Modal from anywhere

3 Answers3

Linked