使用引导程序关闭 angular.js 中的所有对话框

Posted 2023-05-09

【中文标题】使用引导程序关闭 angular.js 中的所有对话框

【英文标题】：Close all dialog boxes in angular.js with bootstrap

【发布时间】：2017-05-07 10:05:31

【问题描述】：

我有一个生成对话框的例子，通过点击“显示模态”按钮，这里对话框被加载，然后如果我点击这个模态的按钮叫做“打开其他模态”，第二个对话框打开。当我单击任何模式的取消按钮时，我需要它，关闭对话框。目前有第二个对话框打开，如果我点击取消，只有第二个被关闭，当我尝试在第一个对话框中点击取消时，它不会关闭。我能做什么？

var modalInstance = null;
var modalScope = $scope.$new();

$scope.close = function (ok, hide) 
    if(ok) 
        //alert('ok');
     else 
        //alert('cancel');
    
    modalInstance.dismiss();
;

$scope.showModal = function()     
     modalInstance = $modal.open(
         templateUrl: 'myModal.html',
         scope: modalScope
     );


$scope.otherModal = function()     
     modalInstance = $modal.open(
         templateUrl: 'myModal2.html',
         scope: modalScope
     );

http://fiddle.jshell.net/9bum7snh/

【问题讨论】：

请在此处包含代码示例。

@rckrd 好的。准备好了！

【参考方案1】：

您需要跟踪您正在创建的模式。这是一个简单的示例，模态被保存在一个数组中。可能有更好的解决方案，但这会为您提供有关如何解决问题的提示。

    var modalInstances = [];
    var modalScope = $scope.$new();

    $scope.close = function (ok, hide) 
        if(ok) 
            //alert('ok');
         else 
            //alert('cancel');
        
        if(modalInstances.length > 0)
          modalInstances[modalInstances.length-1].dismiss();
          modalInstances.pop();
        

    ;


    $scope.showModal = function()     
         modalInstances.push($modal.open(
             templateUrl: 'myModal.html',
             scope: modalScope
         ));
    

    $scope.otherModal = function()     
         modalInstances.push($modal.open(
             templateUrl: 'myModal2.html',
             scope: modalScope
         ));
    

【参考方案2】：

您可以给它们一个不同的变量名称，然后将它们传递给模板中的关闭函数。然后有条件地解雇他们，请参见下文。

angular.module("myApp", ['ui.bootstrap'])
  .controller("MyCtrl", function($scope, $modal) 

    var modalInstanceOne,
      modalInstanceTwo;
    var modalScope = $scope.$new();

    $scope.close = function(modal) 
      return (modal === 'modalInstanceOne') ? modalInstanceOne.dismiss() : modalInstanceTwo.dismiss();
    ;


    $scope.showModal = function() 
      modalInstanceOne = $modal.open(
        templateUrl: 'myModal.html',
        scope: modalScope
      );
    

    $scope.otherModal = function() 
      modalInstanceTwo = $modal.open(
        templateUrl: 'myModal2.html',
        scope: modalScope
      );
    
  );

<div ng-app="myApp">

  <!-- FIRST MODAL -->
  <script type="text/ng-template" id="myModal.html">
    <div class="modal-header">
      <h3 class="modal-title">Modal title</h3>
    </div>
    <div class="modal-body">
      <button type='button' ng-click='otherModal()'>open other modal</button>
    </div>
    <div class="modal-footer">
      <button class="btn btn-primary" ng-click="close(true)">OK</button>
      <button class="btn btn-warning" ng-click="close('modalInstanceOne')">Cancel</button>
    </div>
  </script>

  <!-- SECOND MODAL -->

  <script type="text/ng-template" id="myModal2.html">
    <div class="modal-header">
      <h3 class="modal-title">OTHER MODAL</h3>
    </div>
    <div class="modal-body">
      Modal content
    </div>
    <div class="modal-footer">
      <button class="btn btn-primary" ng-click="close(true)">OK</button>
      <button class="btn btn-warning" ng-click="close('modalInstanceTwo')">Cancel</button>
    </div>
  </script>


  <div ng-controller="MyCtrl">
    <input type="button" value="Show modal" ng-click="showModal()" />
  </div>