Close All Dialog Boxes In Angular.js With Bootstrap

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 'ope

Solution 1:

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

Solution 2:

You can give them a different variable name and then pass them into your close function in the template. Then conditionally dismiss them, please see below.

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

<divng-app="myApp"><!-- FIRST MODAL --><scripttype="text/ng-template"id="myModal.html"><divclass="modal-header"><h3class="modal-title">Modal title</h3></div><divclass="modal-body"><buttontype='button'ng-click='otherModal()'>open other modal</button></div><divclass="modal-footer"><buttonclass="btn btn-primary"ng-click="close(true)">OK</button><buttonclass="btn btn-warning"ng-click="close('modalInstanceOne')">Cancel</button></div></script><!-- SECOND MODAL --><scripttype="text/ng-template"id="myModal2.html"><divclass="modal-header"><h3class="modal-title">OTHER MODAL</h3></div><divclass="modal-body">
      Modal content
    </div><divclass="modal-footer"><buttonclass="btn btn-primary"ng-click="close(true)">OK</button><buttonclass="btn btn-warning"ng-click="close('modalInstanceTwo')">Cancel</button></div></script><divng-controller="MyCtrl"><inputtype="button"value="Show modal"ng-click="showModal()" /></div>