使用 bootstrap 关闭 angular.js 中的所有对话框 [英] Close all dialog boxes in angular.js with bootstrap

问题描述

我有一个生成对话框的例子，通过点击show modal"按钮，这里加载了对话框，然后如果我点击这个modal的按钮open other modal"，第二个对话框打开.当我单击任何模态的取消按钮时，我需要它，关闭对话框.当前打开第二个对话框，如果我点击取消，只有第二个被关闭，当我尝试在第一个对话框中点击取消时，它不会关闭.我能做什么?

I have an example in which a dialog box is generated, by clicking on the "show modal" button, here the dialog box is loaded, then if I click on the button of this modal called "open other modal", the second dialog Box is open. I need it when I click the cancel button of any modal, close the dialog box. Currently having the second dialog box open, if I click cancel, only the second is closed, when I try to click cancel in the first dialog box, it will not close. What I can do?

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/

推荐答案

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

You need to keep track of the modals you are creating. Here is a quick example were the modals are kept in an array. There are probably much better solutions, but this gives you a hint on how to solve your problem.

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

这篇关于使用 bootstrap 关闭 angular.js 中的所有对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！