Close all dialog boxes in angular.js with bootstra

Question

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/

Answer 1

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

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

Answer 2

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