demos/attribute-interpolation-workflow-changes-angularjs/new.htm

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

	<title>
		Looking At Attribute Interpolation Workflow In AngularJS 1.2.16
	</title>
</head>
<body ng-controller="AppController">

	<h1>
		Looking At Attribute Interpolation Workflow In AngularJS 1.2.16
	</h1>

	<!-- Here, wer are using a Directive that uses attribute interpolation. -->
	<p bn-title="My friend is {{ friend }}.">
		This is a 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", [] );


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


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

				$scope.friend = "Sarah";

			}
		);


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


		// I am the directive that tests the attribute interpolation to see when the
		// interpolated value is available to the link function.
		app.directive(
			"bnTitle",
			function() {

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

					// Check initial value.
					console.log( "On link load:", attributes.bnTitle );

					// Watch the value over time.
					attributes.$observe(
						"bnTitle",
						function( newValue, oldValue ) {

							console.log( "On observe:", newValue );

						}
					);

				}


				// Return the directive configuration.
				return({
					link: link,
					restrict: "A"
				});

			}
		);

	</script>

</body>
</html>