Closing all open Bootstrap modals in AngularJS? - angularjs

Question

I have created a modal that opens another modal. I want to use the second modal as a confirmation box to close the first one. I cant get it to close both modals when I click ok on the confirmation box (the 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 got it working in my project without using any factory or additional code.
//hide any open bootstrap modals
angular.element('.inmodal').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 bootstrap modals
angular.element('.inmodal').hide();
//do something else here
});
If you want to hide any other modals such as angular material dialog ($mdDialog) & sweet alert dialog's use angular.element('.modal-dialog').hide(); & angular.element('.sweet-alert').hide();
I don't know if this is the right approach , but it works for me.