bennadel · March 23, 2015 12:19
diff --git a/angularjs-modals.htm b/angularjs-modals.htm
 <!doctype html>
 <html ng-app="Demo">
 <head>
 	<meta charset="utf-8" />

 	<title>
 		Creating A Simple Modal System In AngularJS
 	</title>

 	<link rel="stylesheet" type="text/css" href="./demo.css"></link>
 </head>
 <body ng-controller="AppController">

 	<h1>
 		Creating A Simple Modal System In AngularJS
 	</h1>

 	<ul>
 		<li>
 			<a ng-click="alertSomething()">Alert something</a>
 		</li>
 		<li>
 			<a ng-click="confirmSomething()">Confirm something</a>
 		</li>
 		<li>
 			<a ng-click="promptSomething()">Prompt something</a>
 		</li>
 	</ul>


 	<!--
 		BEGIN: Modals Layout.
 		--
 		Our simple modal system makes the assumption that only one modal window can be
 		open at a time. I find this to be a very reasonable assumption for 99% of use-
 		cases. And, I'd rather keep it simple and work around the rare use-case in some
 		other fashion (such as a multi-state modal).

 		To remove any "magic", I'm explicitly presenting the control properties rather
 		than trying to hide them behind a compile() step. Notice that rendering a modal
 		is JUST LIKE RENDERING ANY OTHER VIEW - we have a subview variable which we are
 		using to swap modals, or remove modals altogether.

 		The big take-away in the following code is that modal windows aren't a *special*
 		concept. They are views or components that work the same exact way that the rest
 		of your application works! Sure, there are a few more rules, like only one open
 		at a time; but, other than that, there's nothing here that's any different than
 		any other view you will build. It has a Controller, it has a View, and it works
 		with other services to execute its functionality.
 	-->
 	<div
 		bn-modals
 		ng-show="subview"
 		class="m-modals"
 		ng-switch="subview">

 		<!-- BEGIN: Alert Modal. -->
 		<div
 			ng-switch-when="alert"
 			ng-controller="AlertModalController"
 			class="modal">

 			<p>
 				{{ message }}
 			</p>

 			<p>
 				<a ng-click="close()">Ok, I got it!</a>
 			</p>

 			<!-- This is to demonstrate that we can jump from one modal to another. -->
 			<p>
 				<a ng-click="jumpToConfirm()" class="jump">Jump over to the confirm modal</a>
 			</p>

 		</div>
 		<!-- END: Alert Modal. -->


 		<!-- BEGIN: Confirm Modal. -->
 		<div
 			ng-switch-when="confirm"
 			ng-controller="ConfirmModalController"
 			class="modal">

 			<p>
 				{{ message }}
 			</p>

 			<p>
 				<a ng-click="confirm()">{{ confirmButton }}</a>
 				&mdash;
 				<a ng-click="deny()">{{ denyButton }}</a>
 			</p>

 		</div>
 		<!-- END: Confirm Modal. -->


 		<!-- BEGIN: Prompt Modal. -->
 		<form
 			ng-switch-when="prompt"
 			ng-controller="PromptModalController"
 			ng-submit="submit()"
 			class="modal">

 			<p>
 				{{ message }}
 			</p>

 			<p ng-if="errorMessage">
 				<strong>Sorry:</strong> {{ errorMessage }}
 			</p>

 			<p>
 				<input type="text" ng-model="form.input" />
 			</p>

 			<p>
 				<a ng-click="submit()">Submit</a>
 				&mdash;
 				<a ng-click="cancel()">Cancel</a>
 			</p>

 		</form>
 		<!-- END: Prompt Modal. -->

 	</div>
 	<!-- END: Modals Layout. -->


 	<!-- Load scripts. -->
 	<script type="text/javascript" src="../../vendor/angularjs/angular-1.3.15.min.js"></script>
 	<script type="text/javascript" src="../../vendor/angularjs/angular-animate-1.3.15.min.js"></script>
 	<script type="text/javascript">

 		// Create an application module for our demo.
 		var app = angular.module( "Demo", [ "ngAnimate" ] );


 		// -------------------------------------------------- //
 		// -------------------------------------------------- //


 		// I control the root of the application.
 		app.controller(
 			"AppController",
 			function( $scope, modals ) {

 				// I open an Alert-type modal.
 				$scope.alertSomething = function() {

 					// The .open() method returns a promise that will be either
 					// resolved or rejected when the modal window is closed.
 					var promise = modals.open(
 						"alert",
 						{
 							message: "I think you are kind of beautiful!"
 						}
 					);

 					promise.then(
 						function handleResolve( response ) {

 							console.log( "Alert resolved." );

 						},
 						function handleReject( error ) {

 							console.warn( "Alert rejected!" );

 						}
 					);

 				};


 				// I open a Confirm-type modal.
 				$scope.confirmSomething = function() {

 					// The .open() method returns a promise that will be either
 					// resolved or rejected when the modal window is closed.
 					var promise = modals.open(
 						"confirm",
 						{
 							message: "Are you sure you want to taste that?!"
 						}
 					);

 					promise.then(
 						function handleResolve( response ) {

 							console.log( "Confirm resolved." );

 						},
 						function handleReject( error ) {

 							console.warn( "Confirm rejected!" );

 						}
 					);

 				};


 				// I open a Prompt-type modal.
 				$scope.promptSomething = function() {

 					// The .open() method returns a promise that will be either
 					// resolved or rejected when the modal window is closed.
 					var promise = modals.open(
 						"prompt",
 						{
 							message: "Who rocks the party the rocks the body?",
 							placeholder: "MC Lyte."
 						}
 					);

 					promise.then(
 						function handleResolve( response ) {

 							console.log( "Prompt resolved with [ %s ].", response );

 						},
 						function handleReject( error ) {

 							console.warn( "Prompt rejected!" );

 						}
 					);

 				};

 			}
 		);


 		// -------------------------------------------------- //
 		// -------------------------------------------------- //


 		// I control the Alert modal window.
 		// --
 		// NOTE: This controller gets "modals" injected; but, it is in no way
 		// different than any other Controller in your entire AngularJS application.
 		// It takes services, manages the view-model, and knows NOTHING about the DOM.
 		app.controller(
 			"AlertModalController",
 			function( $scope, modals ) {

 				// Setup default values using modal params.
 				$scope.message = ( modals.params().message || "Whoa!" );


 				// ---
 				// PUBLIC METHODS.
 				// ---


 				// Wire the modal buttons into modal resolution actions.
 				$scope.close = modals.resolve;


 				// I jump from the current alert-modal to the confirm-modal.
 				$scope.jumpToConfirm = function() {

 					// We could have used the .open() method to jump from one modal
 					// to the next; however, that would have implicitly "rejected" the
 					// current modal. By using .proceedTo(), we open the next window, but
 					// defer the resolution of the current modal until the subsequent
 					// modal is resolved or rejected.
 					modals.proceedTo(
 						"confirm",
 						{
 							message: "I just came from Alert - doesn't that blow your mind?",
 							confirmButton: "Eh, maybe a little",
 							denyButton: "Oh please"
 						}
 					)
 					.then(
 						function handleResolve() {

 							console.log( "Piped confirm resolved." );

 						},
 						function handleReject() {

 							console.warn( "Piped confirm rejected." );

 						}
 					);

 				};

 			}
 		);


 		// -------------------------------------------------- //
 		// -------------------------------------------------- //


 		// I control the Confirm modal window.
 		// --
 		// NOTE: This controller gets "modals" injected; but, it is in no way
 		// different than any other Controller in your entire AngularJS application.
 		// It takes services, manages the view-model, and knows NOTHING about the DOM.
 		app.controller(
 			"ConfirmModalController",
 			function( $scope, modals ) {

 				var params = modals.params();

 				// Setup defaults using the modal params.
 				$scope.message = ( params.message || "Are you sure?" );
 				$scope.confirmButton = ( params.confirmButton || "Yes!" );
 				$scope.denyButton = ( params.denyButton || "Oh, hell no!" );


 				// ---
 				// PUBLIC METHODS.
 				// ---


 				// Wire the modal buttons into modal resolution actions.
 				$scope.confirm = modals.resolve;
 				$scope.deny = modals.reject;

 			}
 		);


 		// -------------------------------------------------- //
 		// -------------------------------------------------- //


 		// I control the Prompt modal window.
 		// --
 		// NOTE: This controller gets "modals" injected; but, it is in no way
 		// different than any other Controller in your entire AngularJS application.
 		// It takes services, manages the view-model, and knows NOTHING about the DOM.
 		app.controller(
 			"PromptModalController",
 			function( $scope, modals ) {

 				// Setup defaults using the modal params.
 				$scope.message = ( modals.params().message || "Give me." );

 				// Setup the form inputs (using modal params).
 				$scope.form = {
 					input: ( modals.params().placeholder || "" )
 				};

 				$scope.errorMessage = null;


 				// ---
 				// PUBLIC METHODS.
 				// ---


 				// Wire the modal buttons into modal resolution actions.
 				$scope.cancel = modals.reject;


 				// I process the form submission.
 				$scope.submit = function() {

 					// If no input was provided, show the user an error message.
 					if ( ! $scope.form.input ) {

 						return( $scope.errorMessage = "Please provide something!" );

 					}

 					modals.resolve( $scope.form.input );

 				};

 			}
 		);


 		// -------------------------------------------------- //
 		// -------------------------------------------------- //


 		// I manage the modals within the application.
 		app.service(
 			"modals",
 			function( $rootScope, $q ) {

 				// I represent the currently active modal window instance.
 				var modal = {
 					deferred: null,
 					params: null
 				};

 				// Return the public API.
 				return({
 					open: open,
 					params: params,
 					proceedTo: proceedTo,
 					reject: reject,
 					resolve: resolve
 				});


 				// ---
 				// PULBIC METHODS.s
 				// ---


 				// I open a modal of the given type, with the given params. If a modal
 				// window is already open, you can optionally pipe the response of the
 				// new modal window into the response of the current (cum previous) modal
 				// window. Otherwise, the current modal will be rejected before the new
 				// modal window is opened.
 				function open( type, params, pipeResponse ) {

 					var previousDeferred = modal.deferred;

 					// Setup the new modal instance properties.
 					modal.deferred = $q.defer();
 					modal.params = params;

 					// We're going to pipe the new window response into the previous
 					// window's deferred value.
 					if ( previousDeferred && pipeResponse ) {

 						modal.deferred.promise
 							.then( previousDeferred.resolve, previousDeferred.reject )
 						;

 					// We're not going to pipe, so immediately reject the current window.
 					} else if ( previousDeferred ) {

 						previousDeferred.reject();

 					}

 					// Since the service object doesn't (and shouldn't) have any direct
 					// reference to the DOM, we are going to use events to communicate
 					// with a directive that will help manage the DOM elements that
 					// render the modal windows.
 					// --
 					// NOTE: We could have accomplished this with a $watch() binding in
 					// the directive; but, that would have been a poor choice since it
 					// would require a chronic watching of acute application events.
 					$rootScope.$emit( "modals.open", type );

 					return( modal.deferred.promise );

 				}


 				// I return the params associated with the current params.
 				function params() {

 					return( modal.params || {} );

 				}


 				// I open a modal window with the given type and pipe the new window's
 				// response into the current window's response without rejecting it
 				// outright.
 				// --
 				// This is just a convenience method for .open() that enables the
 				// pipeResponse flag; it helps to make the workflow more intuitive.
 				function proceedTo( type, params ) {

 					return( open( type, params, true ) );

 				}


 				// I reject the current modal with the given reason.
 				function reject( reason ) {

 					if ( ! modal.deferred ) {

 						return;

 					}

 					modal.deferred.reject( reason );

 					modal.deferred = modal.params = null;

 					// Tell the modal directive to close the active modal window.
 					$rootScope.$emit( "modals.close" );

 				}


 				// I resolve the current modal with the given response.
 				function resolve( response ) {

 					if ( ! modal.deferred ) {

 						return;

 					}

 					modal.deferred.resolve( response );

 					modal.deferred = modal.params = null;

 					// Tell the modal directive to close the active modal window.
 					$rootScope.$emit( "modals.close" );

 				}

 			}
 		);


 		// I manage the views that are required to render the modal windows. I don't
 		// actually define the modals in anyway - I simply decide which DOM sub-tree
 		// should be linked. The means by which the modal window is defined is
 		// entirely up to the developer.
 		app.directive(
 			"bnModals",
 			function( $rootScope, modals ) {

 				// Return the directive configuration.
 				return( link );


 				// I bind the JavaScript events to the scope.
 				function link( scope, element, attributes ) {

 					// I define which modal window is being rendered. By convention,
 					// the subview will be the same as the type emitted by the modals
 					// service object.
 					scope.subview = null;

 					// If the user clicks directly on the backdrop (ie, the modals
 					// container), consider that an escape out of the modal, and reject
 					// it implicitly.
 					element.on(
 						"click",
 						function handleClickEvent( event ) {

 							if ( element[ 0 ] !== event.target ) {

 								return;

 							}

 							scope.$apply( modals.reject );

 						}
 					);

 					// Listen for "open" events emitted by the modals service object.
 					$rootScope.$on(
 						"modals.open",
 						function handleModalOpenEvent( event, modalType ) {

 							scope.subview = modalType;

 						}
 					);

 					// Listen for "close" events emitted by the modals service object.
 					$rootScope.$on(
 						"modals.close",
 						function handleModalCloseEvent( event ) {

 							scope.subview = null;

 						}
 					);

 				}

 			}
 		);

 	</script>

 </body>
 </html>
	<!doctype html>
	<html ng-app="Demo">
	<head>
	<meta charset="utf-8" />

	<title>
	Creating A Simple Modal System In AngularJS
	</title>

	<link rel="stylesheet" type="text/css" href="./demo.css"></link>
	</head>
	<body ng-controller="AppController">

	<h1>
	Creating A Simple Modal System In AngularJS
	</h1>

	<ul>
	<li>
	<a ng-click="alertSomething()">Alert something</a>
	</li>
	<li>
	<a ng-click="confirmSomething()">Confirm something</a>
	</li>
	<li>
	<a ng-click="promptSomething()">Prompt something</a>
	</li>
	</ul>


	<!--
	BEGIN: Modals Layout.
	--
	Our simple modal system makes the assumption that only one modal window can be
	open at a time. I find this to be a very reasonable assumption for 99% of use-
	cases. And, I'd rather keep it simple and work around the rare use-case in some
	other fashion (such as a multi-state modal).

	To remove any "magic", I'm explicitly presenting the control properties rather
	than trying to hide them behind a compile() step. Notice that rendering a modal
	is JUST LIKE RENDERING ANY OTHER VIEW - we have a subview variable which we are
	using to swap modals, or remove modals altogether.

	The big take-away in the following code is that modal windows aren't a special
	concept. They are views or components that work the same exact way that the rest
	of your application works! Sure, there are a few more rules, like only one open
	at a time; but, other than that, there's nothing here that's any different than
	any other view you will build. It has a Controller, it has a View, and it works
	with other services to execute its functionality.
	-->
	<div
	bn-modals
	ng-show="subview"
	class="m-modals"
	ng-switch="subview">

	<!-- BEGIN: Alert Modal. -->
	<div
	ng-switch-when="alert"
	ng-controller="AlertModalController"
	class="modal">

	<p>
	{{ message }}
	</p>

	<p>
	<a ng-click="close()">Ok, I got it!</a>
	</p>

	<!-- This is to demonstrate that we can jump from one modal to another. -->
	<p>
	<a ng-click="jumpToConfirm()" class="jump">Jump over to the confirm modal</a>
	</p>

	</div>
	<!-- END: Alert Modal. -->


	<!-- BEGIN: Confirm Modal. -->
	<div
	ng-switch-when="confirm"
	ng-controller="ConfirmModalController"
	class="modal">

	<p>
	{{ message }}
	</p>

	<p>
	<a ng-click="confirm()">{{ confirmButton }}</a>
	—
	<a ng-click="deny()">{{ denyButton }}</a>
	</p>

	</div>
	<!-- END: Confirm Modal. -->


	<!-- BEGIN: Prompt Modal. -->
	<form
	ng-switch-when="prompt"
	ng-controller="PromptModalController"
	ng-submit="submit()"
	class="modal">

	<p>
	{{ message }}
	</p>

	<p ng-if="errorMessage">
	<strong>Sorry:</strong> {{ errorMessage }}
	</p>

	<p>
	<input type="text" ng-model="form.input" />
	</p>

	<p>
	<a ng-click="submit()">Submit</a>
	—
	<a ng-click="cancel()">Cancel</a>
	</p>

	</form>
	<!-- END: Prompt Modal. -->

	</div>
	<!-- END: Modals Layout. -->


	<!-- Load scripts. -->
	<script type="text/javascript" src="../../vendor/angularjs/angular-1.3.15.min.js"></script>
	<script type="text/javascript" src="../../vendor/angularjs/angular-animate-1.3.15.min.js"></script>
	<script type="text/javascript">

	// Create an application module for our demo.
	var app = angular.module( "Demo", [ "ngAnimate" ] );


	// -------------------------------------------------- //
	// -------------------------------------------------- //


	// I control the root of the application.
	app.controller(
	"AppController",
	function( $scope, modals ) {

	// I open an Alert-type modal.
	$scope.alertSomething = function() {

	// The .open() method returns a promise that will be either
	// resolved or rejected when the modal window is closed.
	var promise = modals.open(
	"alert",
	{
	message: "I think you are kind of beautiful!"
	}
	);

	promise.then(
	function handleResolve( response ) {

	console.log( "Alert resolved." );

	},
	function handleReject( error ) {

	console.warn( "Alert rejected!" );

	}
	);

	};


	// I open a Confirm-type modal.
	$scope.confirmSomething = function() {

	// The .open() method returns a promise that will be either
	// resolved or rejected when the modal window is closed.
	var promise = modals.open(
	"confirm",
	{
	message: "Are you sure you want to taste that?!"
	}
	);

	promise.then(
	function handleResolve( response ) {

	console.log( "Confirm resolved." );

	},
	function handleReject( error ) {

	console.warn( "Confirm rejected!" );

	}
	);

	};


	// I open a Prompt-type modal.
	$scope.promptSomething = function() {

	// The .open() method returns a promise that will be either
	// resolved or rejected when the modal window is closed.
	var promise = modals.open(
	"prompt",
	{
	message: "Who rocks the party the rocks the body?",
	placeholder: "MC Lyte."
	}
	);

	promise.then(
	function handleResolve( response ) {

	console.log( "Prompt resolved with [ %s ].", response );

	},
	function handleReject( error ) {

	console.warn( "Prompt rejected!" );

	}
	);

	};

	}
	);


	// -------------------------------------------------- //
	// -------------------------------------------------- //


	// I control the Alert modal window.
	// --
	// NOTE: This controller gets "modals" injected; but, it is in no way
	// different than any other Controller in your entire AngularJS application.
	// It takes services, manages the view-model, and knows NOTHING about the DOM.
	app.controller(
	"AlertModalController",
	function( $scope, modals ) {

	// Setup default values using modal params.
	$scope.message = ( modals.params().message \|\| "Whoa!" );


	// ---
	// PUBLIC METHODS.
	// ---


	// Wire the modal buttons into modal resolution actions.
	$scope.close = modals.resolve;


	// I jump from the current alert-modal to the confirm-modal.
	$scope.jumpToConfirm = function() {

	// We could have used the .open() method to jump from one modal
	// to the next; however, that would have implicitly "rejected" the
	// current modal. By using .proceedTo(), we open the next window, but
	// defer the resolution of the current modal until the subsequent
	// modal is resolved or rejected.
	modals.proceedTo(
	"confirm",
	{
	message: "I just came from Alert - doesn't that blow your mind?",
	confirmButton: "Eh, maybe a little",
	denyButton: "Oh please"
	}
	)
	.then(
	function handleResolve() {

	console.log( "Piped confirm resolved." );

	},
	function handleReject() {

	console.warn( "Piped confirm rejected." );

	}
	);

	};

	}
	);


	// -------------------------------------------------- //
	// -------------------------------------------------- //


	// I control the Confirm modal window.
	// --
	// NOTE: This controller gets "modals" injected; but, it is in no way
	// different than any other Controller in your entire AngularJS application.
	// It takes services, manages the view-model, and knows NOTHING about the DOM.
	app.controller(
	"ConfirmModalController",
	function( $scope, modals ) {

	var params = modals.params();

	// Setup defaults using the modal params.
	$scope.message = ( params.message \|\| "Are you sure?" );
	$scope.confirmButton = ( params.confirmButton \|\| "Yes!" );
	$scope.denyButton = ( params.denyButton \|\| "Oh, hell no!" );


	// ---
	// PUBLIC METHODS.
	// ---


	// Wire the modal buttons into modal resolution actions.
	$scope.confirm = modals.resolve;
	$scope.deny = modals.reject;

	}
	);


	// -------------------------------------------------- //
	// -------------------------------------------------- //


	// I control the Prompt modal window.
	// --
	// NOTE: This controller gets "modals" injected; but, it is in no way
	// different than any other Controller in your entire AngularJS application.
	// It takes services, manages the view-model, and knows NOTHING about the DOM.
	app.controller(
	"PromptModalController",
	function( $scope, modals ) {

	// Setup defaults using the modal params.
	$scope.message = ( modals.params().message \|\| "Give me." );

	// Setup the form inputs (using modal params).
	$scope.form = {
	input: ( modals.params().placeholder \|\| "" )
	};

	$scope.errorMessage = null;


	// ---
	// PUBLIC METHODS.
	// ---


	// Wire the modal buttons into modal resolution actions.
	$scope.cancel = modals.reject;


	// I process the form submission.
	$scope.submit = function() {

	// If no input was provided, show the user an error message.
	if ( ! $scope.form.input ) {

	return( $scope.errorMessage = "Please provide something!" );

	}

	modals.resolve( $scope.form.input );

	};

	}
	);


	// -------------------------------------------------- //
	// -------------------------------------------------- //


	// I manage the modals within the application.
	app.service(
	"modals",
	function( $rootScope, $q ) {

	// I represent the currently active modal window instance.
	var modal = {
	deferred: null,
	params: null
	};

	// Return the public API.
	return({
	open: open,
	params: params,
	proceedTo: proceedTo,
	reject: reject,
	resolve: resolve
	});


	// ---
	// PULBIC METHODS.s
	// ---


	// I open a modal of the given type, with the given params. If a modal
	// window is already open, you can optionally pipe the response of the
	// new modal window into the response of the current (cum previous) modal
	// window. Otherwise, the current modal will be rejected before the new
	// modal window is opened.
	function open( type, params, pipeResponse ) {

	var previousDeferred = modal.deferred;

	// Setup the new modal instance properties.
	modal.deferred = $q.defer();
	modal.params = params;

	// We're going to pipe the new window response into the previous
	// window's deferred value.
	if ( previousDeferred && pipeResponse ) {

	modal.deferred.promise
	.then( previousDeferred.resolve, previousDeferred.reject )
	;

	// We're not going to pipe, so immediately reject the current window.
	} else if ( previousDeferred ) {

	previousDeferred.reject();

	}

	// Since the service object doesn't (and shouldn't) have any direct
	// reference to the DOM, we are going to use events to communicate
	// with a directive that will help manage the DOM elements that
	// render the modal windows.
	// --
	// NOTE: We could have accomplished this with a $watch() binding in
	// the directive; but, that would have been a poor choice since it
	// would require a chronic watching of acute application events.
	$rootScope.$emit( "modals.open", type );

	return( modal.deferred.promise );

	}


	// I return the params associated with the current params.
	function params() {

	return( modal.params \|\| {} );

	}


	// I open a modal window with the given type and pipe the new window's
	// response into the current window's response without rejecting it
	// outright.
	// --
	// This is just a convenience method for .open() that enables the
	// pipeResponse flag; it helps to make the workflow more intuitive.
	function proceedTo( type, params ) {

	return( open( type, params, true ) );

	}


	// I reject the current modal with the given reason.
	function reject( reason ) {

	if ( ! modal.deferred ) {

	return;

	}

	modal.deferred.reject( reason );

	modal.deferred = modal.params = null;

	// Tell the modal directive to close the active modal window.
	$rootScope.$emit( "modals.close" );

	}


	// I resolve the current modal with the given response.
	function resolve( response ) {

	if ( ! modal.deferred ) {

	return;

	}

	modal.deferred.resolve( response );

	modal.deferred = modal.params = null;

	// Tell the modal directive to close the active modal window.
	$rootScope.$emit( "modals.close" );

	}

	}
	);


	// I manage the views that are required to render the modal windows. I don't
	// actually define the modals in anyway - I simply decide which DOM sub-tree
	// should be linked. The means by which the modal window is defined is
	// entirely up to the developer.
	app.directive(
	"bnModals",
	function( $rootScope, modals ) {

	// Return the directive configuration.
	return( link );


	// I bind the JavaScript events to the scope.
	function link( scope, element, attributes ) {

	// I define which modal window is being rendered. By convention,
	// the subview will be the same as the type emitted by the modals
	// service object.
	scope.subview = null;

	// If the user clicks directly on the backdrop (ie, the modals
	// container), consider that an escape out of the modal, and reject
	// it implicitly.
	element.on(
	"click",
	function handleClickEvent( event ) {

	if ( element[ 0 ] !== event.target ) {

	return;

	}

	scope.$apply( modals.reject );

	}
	);

	// Listen for "open" events emitted by the modals service object.
	$rootScope.$on(
	"modals.open",
	function handleModalOpenEvent( event, modalType ) {

	scope.subview = modalType;

	}
	);

	// Listen for "close" events emitted by the modals service object.
	$rootScope.$on(
	"modals.close",
	function handleModalCloseEvent( event ) {

	scope.subview = null;

	}
	);

	}

	}
	);

	</script>

	</body>
	</html>