CODEWITHSUNDEEP
angularjs
rupali317
rupali317

Reputation: 512

How to dismiss previous modals when a new modal appears in AngularJS?

Overview: In this code, there are 2 buttons. Clicking on the buttons will open the respective modals. Clicking on the button "input", will show the modal with content "input". Similarly, clicking on the button "output", will show the modal with content "output".

Issue: When I click on "input" button, the modal with content "input" appears. But when I click on "output" button, I notice that "output" modal will appear in front of the previous modal. In other words, the previous modal does not disappear.

My requirement is to ensure that when a new modal appears, the previous modal should disappear. These two buttons have to belong to two different controllers. My question is how to dismiss the previous modal when a new modal appears? 

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <script type="text/javascript">
            var app = angular.module('app',[ 'ui.bootstrap']);
            app.controller('testController1', 
                function($scope, $uibModal){
                    $scope.output = function() {
                        $uibModal.open({
                            animation: true,
                            windowClass: 'app-modal-window app-modal-window-mobile modal fade',
                            template: "<p>output</p>"
                        });
                    }
                }
            ); 
            app.controller('testController2',
                function($scope, $uibModal){
                    $scope.input = function() {
                        $uibModal.open({
                            animation: true,
                            windowClass: 'app-modal-window app-modal-window-mobile modal fade',
                            template: "<p>input</p>"
                        });
                    }
                }
            ); 
        </script> 
        <style type="text/css">
        .toolbarContainerPlaceholder {
            position: fixed;
            top: 30px;
            width: 10%;
            margin: 0px;
            padding: 0px !important;
            border-bottom: 3px solid #F7F7FA !important;
            background-color: #F7F7FA;
            z-index: 30000;
            min-height: 47px;
        }
        </style>
    </head>
    <body ng-app="app">
        <div class="toolbarContainerPlaceholder">
            <div ng-controller="testController1">
                <button ng-click="output()">output</button>
            </div>
            <div ng-controller="testController2">
                <button ng-click="input()">input</button>
            </div>
        </div>
    </body>
</html>

Upvotes: 0

Views: 1558

Answers (3)

JC Ford
JC Ford

Reputation: 7066

UI Bootstrap defines a service called $uibModalStack. Inject it and call $uibModalStack.dismissAll() to close all modals. Then proceed to open your new modal with $uibModal.open()

Upvotes: 1

CodeSmith
CodeSmith

Reputation: 3197

 var uibModal =  $uibModal(definition)
 uibModal.close()

Will close the modal instance.

I think it would do so automatically (not 100% sure) IF you didn't have models created in separate controllers (is there a need for that I don't see here?)

Put it into the same controller and create uibModal1 and uibModal2 (might wanna have more clever names here) and simply when opening one call .close() on another if it doesn't happen automatically.

EDIT: Since you have to have controllers separated you need to establish communication between them. In this case, I would emit an event.

On button press of testController1

$emit("closeModal2", args);

in testController2 have a listener for the other emit:

$on("closeModal2", uibModal2.close());

Do vice versa for other modal, have a listener listening to closeModal1 in testController1 and fire that event from testController2 when opening second modal.

Upvotes: 0

Ben
Ben

Reputation: 2706

You can set a variable for each of your modals. For example:

var inputModal;

inputModal= $uibModal.open({
  animation: true,
  windowClass: 'app-modal-window app-modal-window-mobile modal fade',
  template: "<p>input</p>"
});

Then when the other modal is opened, you can simply do:

$scope.output = function() {
    inputModal.close(); // This line right here is where you close the other
    $uibModal.open({
       animation: true,
       windowClass: 'app-modal-window app-modal-window-mobile modal fade',
       template: "<p>output</p>"
    });
}

Upvotes: 0

Related Questions