Question

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

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

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

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

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

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

2 个答案: