Закрытие всех открытых модулей Bootstrap в AngularJS?

Question

Я создал модальный, который открывает другой модальный. Я хочу использовать второй модальный как окно подтверждения, чтобы закрыть первый. Я не могу заставить его закрыть оба модала, когда я нажимаю ok в окне подтверждения (второй модальный).

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

Вы можете использовать $modalStack из ui.bootstrap закрыть все экземпляры $modalInstance

$modalStack.dismissAll(reason); 

Answer 2

Это, как я получил это работает в моем проекте без использования какой-либо завод или дополнительный код.

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

У меня есть функция тайм-аута, испускающий выход из системы, как $rootScope.$emit('logout'); и слушатель в моей службы заключается в следующем:

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

        //do something else here 

       }); 

Если вы хотите, чтобы скрыть какие-либо другие модальности, например, диалог углового материала ($ mdDialog) использование & Диалога сладкого ALERT в angular.element('.modal-dialog').hide(); & angular.element('.sweet-alert').hide();

Я не знаю, если это правильный подход, но это работает для меня.