Closing all open Bootstrap modal modules in AngularJS?

Question

I created a modal that opens up another modal. I want to use the second modal as a confirmation window to close the first. I can’t get him to close both modules when I click ok in the confirmation window (second modal).

tree.html:

<script type="text/ng-template" id="tree_item_renderer.html"> <div class="bracket-match" ng-class="match.tier == 1 ? 'bracket-match-final' : ''"> <p ng-show="match.tier == 1" class="finale-title">Finale</p> <div class="match-content"> <div class="player-div"> <div class="bracket-player-1 bracket-player-1-tier-{{tierCount+1-match.tier}}"> <input class="input-player-1 input-player-name form-control" type="text" ng-model="match.player1" placeholder="Deltager 1"> </div> </div> <div class="player-div border-bottom"> <div class="bracket-player-2"> <input class="input-player-2 input-player-name form-control" type="text" ng-model="match.player2" placeholder="Deltager 2"> </div> </div> </div> <div ng-show="match.tier == 1 && showthirdplace && tierCount >= 2" class="third-place" ng-model="thirdplace"> <p class="finale-title">3. plads</p> <div class="match-content"> <div class="player-div"> <div class="bracket-player-1 bracket-player-1-tier-{{tierCount+1-match.tier}}"> <input class="input-player-1 input-player-name form-control" type="text" ng-model="match.player1" placeholder="Deltager 1"> </div> </div> <div class="player-div border-bottom"> <div class="bracket-player-2"> <input class="input-player-2 input-player-name form-control" type="text" ng-model="match.player2" placeholder="Deltager 2"> </div> </div> </div> </div> </div> <div class="bracket-column"> <div ng-repeat="match in match.previousMatches" ng-include="'tree_item_renderer.html'" /> </div> </script> <script type="text/ng-template" id="tournament-tree.html"> <div class="row modal-footer-btns"> <button class="btn btn-primary" ng-click="ok()">GEM</button> <button class="btn btn-warning btn-xs" ng-click="openAlertBox()" type="button" data-dismiss="modal">LUK, uden at gemme</button> </div> <div class="row" style="margin-bottom:15px;"> <a ng-click="addMatchTier()" class="btn btn-primary"><i class="glyphicon glyphicon-plus"></i></a> <a ng-click="removeMatchTier()" ng-class="tierCount > 1 ? 'btn btn-primary' : 'btn btn-default'"><i class="glyphicon glyphicon-minus"></i></a><br /> </div> <div class="row tournament-tree"> <div ng-repeat="match in finalMatch"> </div> <div class="bracket-column"> <div ng-repeat="match in finalMatch" ng-include="'tree_item_renderer.html'"></div> </div> </div> </script> <script type="text/ng-template" id="openAlertBox.html"> <div class="modal-header"> <h3 class="modal-title"></h3> </div> <div class="modal-body"> </div> <div class="modal-footer"> <button class="btn btn-primary" ng-click="ok()">Ja</button> <button class="btn btn-warning" ng-click="cancel()">Annuller</button> </div> </script> 

Categories.html:

 <div class="row"> <div class="modal-header"> <h3 class="modal-title"></h3> </div> </div> <div ng-controller="CategoriesController"> <a ng-click="add()" class="btn btn-tree btn-primary" style="margin-top:15px;">Tilføj hovedkategori</a> <p ng-repeat="data in nodes" ng-include="'category_item_renderer.html'"></p> <ng-include src="'Modules/TournamentTree/Tree.html'"></ng-include> </div> <script type="text/ng-template" id="category_item_renderer.html"> <div class="category-style"> <div class="push-cat-btn"> <a ng-click="add(data)" class="btn btn-primary btn-sm"><i class="glyphicon glyphicon glyphicon-plus"></i></a> <a ng-hide="data.nodes.push()" ng-click="openTournamentTree(data)" class="btn btn-info btn-xs">Turnering</a> </div> </div> <p class="push" ng-repeat="data in data.nodes" ng-include="'category_item_renderer.html'"></p> </script> <script type="text/ng-template" id="TournamentTreeModal.html"> <div class="modal-header"> <h3 class="modal-title"></h3> </div> <div class="modal-body"> <div class="include-tree" ng-include="'tournament-tree.html'"></div> </div> <div class="modal-footer"> </div> </script> 

---

TreeController.js:

 angular.module('tournamentTree', ['ui.bootstrap']); angular.module('tournamentTree').controller("TreeController", ['$scope', '$modal', '$modalInstance', 'guidGenerator', function ($scope, $modal, $modalInstance, guidGenerator) { $scope.openAlertBox = function () { var alertBoxInstance = $modal.open({ templateUrl: 'openAlertBox.html', controller: 'TreeController', scope: $scope, size: 'xs', resolve: { } }); }; $scope.ok = function () { $scope.close(); $scope.$parent.close(); } $scope.cancel = function () { $scope.close(); $scope.$parent.dismiss('cancel'); }; 

---

categoriController.js:

 angular.module('tournamentCategories').controller("CategoriesController", ['$scope', '$modal', 'guidGenerator', 'eventBus', domainName + "Service", 'TournamentCategoryModelFactory', function ($scope, $modal, guidGenerator, eventBus, domainService, modelFactory) { $scope.openTournamentTree = function () { var modalInstance = $modal.open({ templateUrl: 'TournamentTreeModal.html', controller: 'TreeController', scope: $scope, size: 'wide-90', backdrop: 'static', keyboard: false, resolve: { } }); modalInstance.result.then(function (selectedItem) { //$scope.selected = selectedItem; }, function () { //$log.info('Modal dismissed at: ' + new Date()); }); }; }]); 

Answer 1

You can use $modalStack from ui.bootstrap to close all instances of $modalInstance

 $modalStack.dismissAll(reason); 

Answer 2

This is how I worked in my project without using factory or extra code.

 //hide any open bootstrap modals angular.element('.inmodal').hide(); 

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

 $rootScope.$on('logout', function () { //hide any open bootstrap modals angular.element('.inmodal').hide(); //do something else here }); 

If you want to hide any other modalities such as the angular material dialog box ($ mdDialog) and the welcome warning dialog box, use angular.element('.modal-dialog').hide(); and angular.element('.sweet-alert').hide();

I don't know if this is correct, but it works for me.