Open/Close multiple modals from a single directive

Question

I'm utilizing multiple modals to guide users through a single form right now, and I've pretty much created a directive that opens/closes a modal for each modal. I've done something like this:

.directive('firstModal', function() {                  // Series of directives used to open/close target modals
        return {
            restrict: 'A',
            link: function(scope, element, attr) {
                scope.dismissFirst = function() {
                    element.modal('hide');
                };
                scope.showFirst = function() {
                    element.modal('show');
                };
            }
        };
    }

I've taken a look at both ui.bootstrap and angular-strap, but both are used for Bootstrap 3.x - this site still runs on Bootstrap 2.3, so I don't think I'll be utilizing either of those two options until we upgrade the site. My question is, is there a way to handle all opening/closing of modals from a single directive?

Answer 1

checkout this link from dah wahlin which contains example using 0.8.0

below is an example on how to use $modal

app.controller('ModalCtrl', function($scope,  $modal) {

      $scope.name = 'theNameHasBeenPassed';

      $scope.showModal = function() {

        $scope.opts = {
        backdrop: true,
        backdropClick: true,
        dialogFade: false,
        keyboard: true,
        templateUrl : 'modalContent.html',
        controller : ModalInstanceCtrl,
        resolve: {} // empty storage
          };


        $scope.opts.resolve.item = function() {
            return angular.copy(
                                {name: $scope.name}
                          ); // pass name to resolve storage
        }

          var modalInstance = $modal.open($scope.opts);

          modalInstance.result.then(function(){
            //on ok button press 
          },function(){
            //on cancel button press
            console.log("Modal Closed");
          });
      };                   
})

var ModalInstanceCtrl = function($scope, $modalInstance, $modal, item) {

     $scope.item = item;

      $scope.ok = function () {
        $modalInstance.close();
      };

      $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
      };
}

PLUNKER LINK

I have copied this answer from this link