Question

概述：在此代码中，有2个按钮。单击按钮将打开相应的模态。点击按钮＆＃34;输入＆＃34;，将显示带有内容＆＃34;输入＆＃34;的模态。同样，点击按钮＆＃34;输出＆＃34;，将显示带有内容＆＃34;输出＆＃34;的模态。

问题当我点击＆＃34;输入＆＃34;按钮，带内容的模态＆＃34;输入＆＃34;出现。但是当我点击＆＃34;输出＆＃34;按钮，我注意到＆＃34;输出＆＃34;模态将出现在前一个模态的前面。换句话说，先前的模态不会消失。

我的要求是为了确保当出现新模态时，之前的模态应该会消失。这两个按钮必须属于两个不同的控制器。我的问题是在新模式出现时如何解除之前的模态？

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <script type="text/javascript">
            var app = angular.module('app',[ 'ui.bootstrap']);
            app.controller('testController1', 
                function($scope, $uibModal){
                    $scope.output = function() {
                        $uibModal.open({
                            animation: true,
                            windowClass: 'app-modal-window app-modal-window-mobile modal fade',
                            template: "<p>output</p>"
                        });
                    }
                }
            ); 
            app.controller('testController2',
                function($scope, $uibModal){
                    $scope.input = function() {
                        $uibModal.open({
                            animation: true,
                            windowClass: 'app-modal-window app-modal-window-mobile modal fade',
                            template: "<p>input</p>"
                        });
                    }
                }
            ); 
        </script> 
        <style type="text/css">
        .toolbarContainerPlaceholder {
            position: fixed;
            top: 30px;
            width: 10%;
            margin: 0px;
            padding: 0px !important;
            border-bottom: 3px solid #F7F7FA !important;
            background-color: #F7F7FA;
            z-index: 30000;
            min-height: 47px;
        }
        </style>
    </head>
    <body ng-app="app">
        <div class="toolbarContainerPlaceholder">
            <div ng-controller="testController1">
                <button ng-click="output()">output</button>
            </div>
            <div ng-controller="testController2">
                <button ng-click="input()">input</button>
            </div>
        </div>
    </body>
</html>

Answer 1

UI Bootstrap定义了一个名为$uibModalStack的服务。注入它并调用$uibModalStack.dismissAll()来关闭所有模态。然后使用$uibModal.open()

继续打开新模式

Answer 2

您可以为每个模态设置变量。例如：

var inputModal;

inputModal= $uibModal.open({
  animation: true,
  windowClass: 'app-modal-window app-modal-window-mobile modal fade',
  template: "<p>input</p>"
});

然后当打开另一个模态时，您可以执行以下操作：

$scope.output = function() {
    inputModal.close(); // This line right here is where you close the other
    $uibModal.open({
       animation: true,
       windowClass: 'app-modal-window app-modal-window-mobile modal fade',
       template: "<p>output</p>"
    });
}

Answer 3

 var uibModal =  $uibModal(definition)
 uibModal.close()

将关闭模态实例。

我认为如果你没有在不同的控制器中创建模型，那么它会自动（不是100％肯定）这样做（有需要我不会在这里看到吗？）

将它放入同一个控制器并创建uibModal1和uibModal2（可能想在这里有更多聪明的名字），并且只是在另一个上面打开一个.close（）时，如果它没有自动发生的话。

编辑：由于您必须将控制器分开，因此您需要在它们之间建立通信。在这种情况下，我会发出一个事件。

按下testController1按钮

$emit("closeModal2", args);

testController2中的

为另一个发出了一个侦听器：

$on("closeModal2", uibModal2.close());

对于其他模态反之亦然，让一个监听器在testController1中监听closeModal1并在打开第二个模态时从testController2触发该事件。

如何在AngularJS中出现新模态时忽略以前的模态？

3 个答案: