关闭AngularJS中所有打开的Bootstrap模式？

Posted 2021-04-16

我创建了一个打开另一个模态的模态。我想使用第二个模态作为关闭第一个模式的确认框。当我在确认框（第二个模态）上单击确定时，我无法关闭两个模态。

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

答案

您可以使用ui.bootstrap中的$modalStack来关闭$modalInstance的所有实例

$modalStack.dismissAll(reason);

另一答案

这就是我在不使用任何工厂或其他代码的情况下在我的项目中工作的方式。

//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）和甜蜜警报对话框，请使用angular.element('.modal-dialog').hide();＆angular.element('.sweet-alert').hide();

我不知道这是否是正确的方法，但它对我有用。