Angular Modal Demo

by wmyers

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.compat.js"></script>
<div ng-app="modalDemo" ng-cloak>
    <h3>Angular Modal Demo</h3>
    <!-- Modal demo UI -->
    <div ng-controller="modalDemoCtrl" class="demo-ui-container">
        <div class="dash-button" ng-click="launchModal('emailIntercept', 1)">Launch Modal 1</div>
        <div class="clearfix"></div><br>
        <div class="dash-button" ng-click="launchModal('wipeHardDrive', 2, true)">Launch Modal 2</div>
        <div class="clearfix"></div><br>
        <p ng-show='modalOKConfig !== null'> Received OK from modal with contentId: <span>{{modalOKConfig.contentId}}</span> and targetId: <span>{{modalOKConfig.targetId}}</span></p>
    </div>
    <!-- Concrete modal directive -->
    <modal>
        <modal-content id="emailIntercept">
            Your emails are being intercepted.
        </modal-content>
        <modal-content id="wipeHardDrive">
            Are you sure you want to wipe your hard drive?
        </modal-content>
    </modal>
</div>

CSS

/**********************************/
/*Meyer reset*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
 /*HTML5 display-role reset for older browsers*/
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/*Apply a natural box layout model to all elements*/
/*from: http://www.paulirish.com/2012/box-sizing-border-box-ftw/*/
*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

/**********************************/
/*Base css styles for simple demos*/

/*Layout*/
body {
  margin:50px 0px; padding:0px;
  text-align:center;
  background: #ddd;
}

.demo-ui-container {
  width:300px;
  margin:0px auto;
  text-align:left;
  padding:15px;
  border:1px dashed #333;
  background-color:#eee;
}

/*Text*/
html {
  color: #444;
  font-size: 16px;
  line-height: 1.4;
  font-family: Helvetica, Arial, sans-serif;;
  font-weight: 300;
}

h1, h2, h3, h4, h5, h6 {
  font-family: Helvetica, Arial, sans-serif;;
  font-weight: 400;
  margin-top: 0.3em;
  margin-bottom: 0.3em;
  color: #333;
}
h1 {font-size: 2.4rem;}
h2 {font-size: 2rem;}
h3 {font-size: 1.6rem;}

hr {border-top: 1px dashed #ccc;}

a, a:link {
...

JavaScript

'use strict';

/**
* http://www.hiddentao.com/archives/2013/11/04/an-improved-angular-module-split-your-modules-into-multiple-files/
* Workaround to make defining and retrieving angular modules easier and more intuitive.
* WM: NB this also will prevent 'module not found error' by always creating a module
* if it does not already exist, but also allowing more dependencies to be added.
*/

(function(angular) {
  var origMethod = angular.module;

  var alreadyRegistered = {};

  /**
  * Register/fetch a module.
  *
  * @param name {string} module name.
  * @param reqs {array} list of modules this module depends upon.
  * @param configFn {function} config function to run when module loads (only applied for the first call to create this module).
  * @returns {*} the created/existing module.
  */
  angular.module = function(name, reqs, configFn) {
    //WM added for debugging
    var isReqs = (reqs && reqs.length !== undefined);
    reqs = reqs || [];
    var module = null;

    //debugger
    //console.log('*&*&*&*&*&*&*&*&', (isReqs ? 'initing' : 'accessing'), 'module', name);

    if (alreadyRegistered[name]) {
      module = origMethod(name);
      module.requires.push.apply(module.requires, reqs);
    } else {
      module = origMethod(name, reqs, configFn);
      alreadyRegistered[name] = module;
    }

    return module;
  };

})(angular);

//************************************************

angular.module('modalDemo', ['modalComp'])
.controller('modalDemoCtrl',
                            [
                            '$scope',
                            'ModalService',
                            function (
                              $scope,
                              ModalService
                            ) {

            //config attached to modal OK button click events
            $scope.modalOKConfig = null;

            $scope.launchModal = function(contentId, targetId, cancellable){
              $scope.modalOKConfig = null;
             ...