Using Angular Directives To Encapsulate HTML Content

Directives in Angular provide a clean method for encapsulating chunks of HTML. The interface for doing this is simple and straight forward.

Let's create a simple pop-up modal window.

<modal title="Modal Title At This Spot">
    <p> the body of the modal </p>
    <p> the body of the modal - line 2 </p>
    <p> the body of the modal - line 3 </p>
</modal>


The replacement template for this is modal.html. In the complete example below we will place the HTML in line. It can also be placed in a file, modal.html (modal.html):


<div class="modal hide fade">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-click="close()">×</button>
		<h3>{{title}}</h3>
	</div>
	<div class="modal-body">
		<div ng-transclude></div>
	</div>
	<div class="modal-actions">
		xyzzy		
	</div>
</div>



Connecting all of this together takes a simple directive (directive.js):


app.directive('modal', function() {
	return {
		  restrict: 'E'							// Restrict to being an Element
		, templateUrl: 'modal.html'				// Can be in a file 'modal.html' or see links on inlining templates
		, replace: true							// Remove the original HTML from the document and replace it with this
		, transclude: true						// transclude the body from the original HTML into this
		, scope: {
				title: '@'						// Take the "title" from the <modal> attributes
			}
		// The other capabilities of ''directive'' like link, compile and a controller are all defaults in this case
	};
});



This puts it all together into a single file. I like examples in a single file so that it is easy to see all the parts working together (all.html).

<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="app">
<head>

	<link rel="stylesheet" type="text/css" href="../css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="../css/bootstrap-responsive.css">
	<link rel="stylesheet" type="text/css" href="../css/font-awesome.css">

	<script src="../js/jquery-1.9.1.js"></script>
	<script src="../js/angular.js"></script>
    <script src="../js/ui-bootstrap-tpls-0.4.0.js"></script>
	<script src="../js/angular-resource.js"></script>
	<script src="../js/underscore-1.4.4.js"></script>
	<script src="../js/bootstrap.js"></script>
	<script>
		var app = angular.module("app", []);
		app.directive('modal', function() {
			return {
				  restrict: 'E'							// Restrict to being an Element
				, templateUrl: 'modal.html'				// Can be in a file 'modal.html' or see links on inlining templates
				, replace: true							// Remove the original HTML from the document and replace it with this
				, transclude: true						// transclude the body from the original HTML into this
				, scope: {
						title: '@'						// Take the "title" from the <modal> attributes
					}
			};
		});
	</script>
	<script type="text/ng-template" id="modal.html">
		<div class="modal hide fade">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-click="close()">×</button>
				<h3>{{title}}</h3>
			</div>
			<div class="modal-body">
				<div ng-transclude></div>
			</div>
			<div class="modal-actions">
				xyzzy		
			</div>
		</div>
	</script>
</head>
<body>

Test;110<br>

<modal title="This is a Test Modal Title">
	<p>the body of the modal - line 0</p>
	<p>the body of the modal - line 1</p>
	<p>the body of the modal - line 2</p>
	<p>the body of the modal - line 3</p>
</modal>

</body>
</html>



•       •       •       •       •       •

Summary: # of Words: 188
Author: Philip J. Schlump
Published On: 2013-10-15

Download code from this articles in .tar.gz for Mac/Linux/Unix or .zip with CR/LF for Windows format.

 

Before You Go....

Have you read "Unintend Consinsequences"?

"I laughed so hard it hurt..."
    Rod Brown

"Incredibly funny! Incredibly true!"
    Tad Stevens