Add attr example.

bennadel · bennadel · commit 082f754a02c6 · 2014-06-20T07:42:13.000-04:00
diff --git a/demos/inspecting-attribute-normalization-directives-angularjs/index.htm b/demos/inspecting-attribute-normalization-directives-angularjs/index.htm
@@ -0,0 +1,76 @@
+<!doctype html>
+<html ng-app="Demo">
+<head>
+	<meta charset="utf-8" />
+
+	<title>
+		Inspecting Attribute-Normalization Within Directives In AngularJS
+	</title>
+</head>
+<body>
+
+	<h1>
+		Inspecting Attribute-Normalization Within Directives In AngularJS
+	</h1>
+
+	<p 
+		bn-one="Some value."
+		data-bn-two="Some value." 
+		x-bn-three="Some value."
+		bn:four="Some value.">
+		This is my directive!
+	</p>
+
+
+	<!-- Load scripts. -->
+	<script type="text/javascript" src="../../vendor/jquery/jquery-2.1.0.min.js"></script>
+	<script type="text/javascript" src="../../vendor/angularjs/angular-1.2.16.min.js"></script>
+	<script type="text/javascript">
+
+		// Create an application module for our demo.
+		var app = angular.module( "Demo", [] );
+
+
+		// -------------------------------------------------- //
+		// -------------------------------------------------- //
+
+
+		// Define each of our directives - they all use the same logic.
+		angular.forEach(
+			[ "bnOne", "bnTwo", "bnThree", "bnFour" ],
+			function( hook ) {
+
+				app.directive(
+					hook,
+					function() {
+
+						function link( $scope, element, attributes ) {
+
+							// The [attributes] collection is keyed on the normalized
+							// value of the directive. But, it contains the $attr 
+							// collection, which maps the normalized value to the actual
+							// attribute notation defined by the developer.
+							console.log( 
+								"%s defined as %c %s ",
+								hook,
+								"background-color: yellow; font-weight: bold ;",
+								attributes.$attr[ hook ]
+							);
+
+						}
+
+						// Return the directive configuration.
+						return({
+							link: link
+						});
+
+					}
+				);
+
+			}
+		);
+
+	</script>
+
+</body>
+</html>
diff --git a/index.htm b/index.htm
@@ -13,6 +13,9 @@ <h1>
 	</h1>
 
 	<ul>
+		<li>
+			<a href="./demos/inspecting-attribute-normalization-directives-angularjs/">Inspecting Attribute-Normalization Within Directives In AngularJS</a>
+		</li>
 		<li>
 			<a href="./demos/shadowing-isolate-scope-behaviors-angularjs/">Shadowing Isolate Scope Behaviors In AngularJS</a>
 		</li>
