Ejemplo de AngularJS Directive para mostrar ventana modal

<!DOCTYPE html>
<html data-ng-app="myApp" data-ng-csp="">

  <head>
    <link rel="stylesheet" href="style.css">
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
    <link href="//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-csp.css" rel="stylesheet">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/2.0/animate.min.css">
</head>

  <body>

    <div ng-controller='myAppController'>
      <button ng-click='toggleModal()'>Open Modal Dialog 1</button>
      <modal-dialog show='modalShown' 
                    width='95' 
                    height='95' 
                    modal-user="user" 
                    save-user="saveUser(user)"
                    template-user="my-customer.html">
      </modal-dialog>
      <button ng-click='toggleModal2()'>Open Modal Dialog 2</button>
      <modal-dialog show='modalShown2' 
                    width='50' 
                    height='50' 
                    modal-user="user" 
                    save-user="saveUser(user)"
                    template-user="my-customer2.html">
      </modal-dialog>
      <div>
        <label>PIN Code:</label>
        <input type="text" ng-model="user.shortKey" />
      </div>
    </div>

    <!-- JAVASCRIPTS -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-sanitize.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-animate.min.js"></script>
    <script src="script.js"></script>
  </body>

</html>

// Code goes here

// Declare app level module which depends on filters, and services
var app = angular.module('myApp', ['ngAnimate', 'ngSanitize']);

app.config( [
    '$compileProvider',
    function( $compileProvider )
    {   
        $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|chrome-extension):/);
        // Angular before v1.2 uses $compileProvider.urlSanitizationWhitelist(...)
    }
]);

app.directive('modalDialog', function($window, $templateCache, $compile, $http) {
  return {
    restrict: 'EA',
    scope: {
      show: '=',
      modalUser: '=',
      saveUser: '&',
      templateUser: '@'
    },
    replace: true, // Replace with the template below
    //transclude: true, // we want to insert custom content inside the directive
    link: function(scope, element, attrs) {

      $http.get(scope.templateUser, {cache: $templateCache}).success(function(tplContent){
                element.replaceWith($compile(tplContent)(scope));                
              });
              
      scope.dialogStyle = {};
      if (attrs.width) {
        scope.dialogStyle.width = attrs.width + '%';
        scope.dialogStyle.left = ( ( 100 - attrs.width ) / 2 ) + '%';
      }
      if (attrs.height) {
        scope.dialogStyle.height = attrs.height + '%';
        scope.dialogStyle.top = ( ( 100 - attrs.height ) / 2 ) + '%';
      }
        
      scope.hideModal = function() {
        scope.show = false;
      };

      scope.clone = function(obj) {
        if (obj === null || typeof obj !== 'object') {
            return obj;
        }
        var temp = obj.constructor(); // give temp the original obj's constructor
        for (var key in obj) {
            temp[key] = scope.clone(obj[key]);
        }
        return temp;
      };

      var tempUser = scope.clone(scope.modalUser);
      
      scope.save = function() {
        scope.saveUser(scope.modalUser);
        scope.show = false;
      };
      
      scope.cancel = function() {
        scope.modalUser = scope.clone(tempUser);
        scope.show = false;
      };
    }
    //template: "<div class='ng-modal' ng-show='show'><div class='ng-modal-overlay'></div><div class='ng-modal-dialog' ng-style='dialogStyle'><div class='ng-modal-close' ng-click='hideModal()'>X</div><div class='ng-modal-dialog-content' ng-transclude></div></div></div>"
    //templateUrl: 'my-customer.html'
    //templateUrl: scope.templateUser
  };
});

app.controller('myAppController', function($scope, $window) {
  $scope.modalShown = false;
  $scope.modalShown2 = false;
  $scope.user = {name:"Mara", surname:"Sanchez", shortKey:"1111"};
  $scope.userMod = {};
  $scope.toggleModal = function() {
    $scope.modalShown = !$scope.modalShown;
  };
  $scope.toggleModal2 = function() {
    $scope.modalShown2 = !$scope.modalShown2;
  };
  $scope.saveUser = function(usr) {
    $scope.userMod = usr;
    $window.alert('Desde metodo SALVAR del controller fuera de la ventana: ' + $scope.userMod.shortKey);
  }
});

/* Styles go here */

.ng-modal-overlay {
  /* A dark translucent div that covers the whole screen */
  position:absolute;
  z-index:9999;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:#000000;
  opacity: 0.5;
}
.ng-modal-overlay2 {
  /* A green translucent div that covers the whole screen */
  position:absolute;
  z-index:9999;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:green;
  opacity: 0.5;
}
.ng-modal-dialog {
  /* A centered div above the overlay with a box shadow. */
  z-index:10000;
  position: absolute;
  width: 50%; /* Default */

  /* Center the dialog */
  top: 25%;
  left: 25%;
  /*transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);*/

  background-color: #fff;
  box-shadow: 4px 4px 80px #000;
}
.ng-modal-dialog-content {
  font-family:'Roboto';
  font-size:14pt;
  color: black;
  padding:10px;
  text-align: left;
}
.ng-modal-close {
  position: absolute;
  top: 3px;
  right: 5px;
  padding: 5px;
  cursor: pointer;
  font-size: 120%;
  display: inline-block;
  font-weight: bold;
  font-family: 'arial', 'sans-serif';
}

/*-----------------------------------------------------------------
		ANIMATIONS
-------------------------------------------------------------------*/
.ng-modal-dialog.ng-hide-add, .ng-modal-dialog.ng-hide-remove {
	display:block!important;
}
.ng-modal-dialog.ng-hide-remove {
    -webkit-animation: bounceIn 1s;
    -moz-animation: bounceIn 1s;
    -ms-animation: bounceIn 1s;
    animation: bounceIn 1s;
}

.ng-modal-dialog.ng-hide-add {
    -webkit-animation: bounceOut .8s;
    -moz-animation: bounceOut .8s;
    -ms-animation: bounceOut .8s;
    animation: bounceOut .8s;
}

.ng-modal-dialog.ng-enter {
    -webkit-animation: rollIn 1s;
    -moz-animation: rollIn 1s;
    -ms-animation: rollIn 1s;
    animation: rollIn 1s;
}

.ng-modal-dialog.ng-leave {
    -webkit-animation: bounceOut .8s;
    -moz-animation: bounceOut .8s;
    -ms-animation: bounceOut .8s;
    animation: bounceOut .8s;
}

<div class='ng-modal' ng-if='show'>
  <div class='ng-modal-overlay'></div>
  <div class='ng-modal-dialog' ng-if='show' ng-style='dialogStyle'>
    <!--<div class='ng-modal-close' ng-click='hideModal()'>X</div>-->
    <div class='ng-modal-dialog-content'>
      Prueba de ventana de dialogo: <strong>my-customer.html</strong>
      <p>Nombre: {{modalUser.name}}</p>
      <p>Surname: {{modalUser.surname}}</p>
      <p>PIN: {{modalUser.shortKey}}</p>
      <input type="text" ng-model="modalUser.shortKey" />
      <button ng-click=save()>Salvar</button>
      <button ng-click=cancel()>Cancelar</button>
    </div>
  </div>
</div>

<div class='ng-modal' ng-if='show'>
  <div class='ng-modal-overlay2'></div>
  <div class='ng-modal-dialog' ng-if='show' ng-style='dialogStyle'>
    <!--<div class='ng-modal-close' ng-click='hideModal()'>X</div>-->
    <div class='ng-modal-dialog-content'>
      Prueba de ventana de dialogo: <strong>my-customer2.html</strong>
      <p>Nombre: {{modalUser.name}}</p>
      <p>Surname: {{modalUser.surname}}</p>
      <p>PIN: {{modalUser.shortKey}}</p>
      <input type="text" ng-model="modalUser.shortKey" />
      <button ng-click=save()>Salvar</button>
      <button ng-click=cancel()>Cancelar</button>
    </div>
  </div>
</div>