bennadel · September 18, 2012 14:04
diff --git a/index.htm b/index.htm
 <!doctype html>
 <html ng-app="Demo">
 <head>
 	<meta charset="utf-8" />
 	<title>Sharing A Mouse Service In AngularJS</title>
 </head>
 <body
 	ng-controller="DemoController"
 	bn-document-click="handleClick()">

 	<h1>
 		Sharing A Mouse Service In AngularJS
 	</h1>

 	<p>
 		Click anywhere to trigger an event.
 	</p>

 	<p>
 		<strong>Click X</strong>: {{ mouseX }}
 	</p>

 	<p>
 		<strong>Click Y</strong>: {{ mouseY }}
 	</p>



 	<!--
 		Load jQuery and AngularJS from the CDN. In order for
 		AngularJS to use the "full" jQuery (as opposed to its own
 		jQLite), we need to load jQuery first.
 	-->
 	<script
 		type="text/javascript"
 		src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js">
 	</script>
 	<script
 		type="text/javascript"
 		src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js">
 	</script>
 	<script type="text/javascript">


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


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


 		// Define the mouse service to keep track of the mouse
 		// coordinates during mouse events. This doesn't actually
 		// track events; but, it provides a global access point for
 		// data that may come out of an event.
 		Demo.factory(
 			"mouse",
 			function() {

 				// Define the initial position. This will be a hash
 				// with X / Y properties.
 				var location = null;

 				// Let's keep track of the previous location, if it
 				// is going to be intertesting at all.
 				var previousLocation = null;

 				// Define the public API for this service.
 				var api = {

 					// Get the current location, if there is one.
 					getLocation: function() {

 						// Return a copy of the location so that we
 						// don't accidentally break encapsulation.
 						return(
 							angular.copy( location )
 						);
 					},

 					// I set the new location.
 					setLocation: function( x, y ) {

 						// If we have a current location, let's copy
 						// it into the previous location.
 						if ( location ) {

 							previousLocation = location;

 						}

 						// Overwrite with the new location.
 						location = {
 							x: x,
 							y: y
 						};

 					}

 				};

 				// Return the API as our factory definition.
 				return( api );

 			}
 		);


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


 		// Define our document-click directive. This will evaluate the
 		// given expression on the containing scope when the click
 		// event is triggered.
 		Demo.directive(
 			"bnDocumentClick",
 			function( $document, mouse ){

 				// I connect the Angular context to the DOM events.
 				var linkFunction = function( $scope, $element, $attributes ){

 					// Get the expression we want to evaluate on the
 					// scope when the document is clicked.
 					var scopeExpression = $attributes.bnDocumentClick;

 					// Bind to the document click event.
 					$document.on(
 						"click",
 						function( event ){

 							// Set the click coordinates in the mouse
 							// service.
 							mouse.setLocation(
 								event.pageX,
 								event.pageY
 							);

 							// Apply the scope expression so the
 							// handler is invoked and the digest()
 							// method is invoked implicitly.
 							$scope.$apply( scopeExpression );

 						}
 					);

 					// TODO: Listen for "$destroy" event to remove
 					// the event binding when the parent controller
 					// is removed from the rendered document.

 				};

 				// Return the linking function.
 				return( linkFunction );

 			}
 		);


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


 		// I am the controller for the Body tag.
 		Demo.controller(
 			"DemoController",
 			function( $scope, mouse ) {

 				// Set the initial X/Y values.
 				$scope.mouseX = "N/A";
 				$scope.mouseY = "N/A";

 				// When the document is clicked, it will invoke
 				// this method, passing-through the jQuery event.
 				$scope.handleClick = function(){

 					// Get the mouse location that has been updated
 					// as result of the click event.
 					var mouseLocation = mouse.getLocation();

 					$scope.mouseX = mouseLocation.x;
 					$scope.mouseY = mouseLocation.y;

 				};

 			}
 		);


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


 	</script>

 </body>
 </html>
	<!doctype html>
	<html ng-app="Demo">
	<head>
	<meta charset="utf-8" />
	<title>Sharing A Mouse Service In AngularJS</title>
	</head>
	<body
	ng-controller="DemoController"
	bn-document-click="handleClick()">

	<h1>
	Sharing A Mouse Service In AngularJS
	</h1>

	<p>
	Click anywhere to trigger an event.
	</p>

	<p>
	<strong>Click X</strong>: {{ mouseX }}
	</p>

	<p>
	<strong>Click Y</strong>: {{ mouseY }}
	</p>



	<!--
	Load jQuery and AngularJS from the CDN. In order for
	AngularJS to use the "full" jQuery (as opposed to its own
	jQLite), we need to load jQuery first.
	-->
	<script
	type="text/javascript"
	src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js">
	</script>
	<script
	type="text/javascript"
	src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js">
	</script>
	<script type="text/javascript">


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


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


	// Define the mouse service to keep track of the mouse
	// coordinates during mouse events. This doesn't actually
	// track events; but, it provides a global access point for
	// data that may come out of an event.
	Demo.factory(
	"mouse",
	function() {

	// Define the initial position. This will be a hash
	// with X / Y properties.
	var location = null;

	// Let's keep track of the previous location, if it
	// is going to be intertesting at all.
	var previousLocation = null;

	// Define the public API for this service.
	var api = {

	// Get the current location, if there is one.
	getLocation: function() {

	// Return a copy of the location so that we
	// don't accidentally break encapsulation.
	return(
	angular.copy( location )
	);
	},

	// I set the new location.
	setLocation: function( x, y ) {

	// If we have a current location, let's copy
	// it into the previous location.
	if ( location ) {

	previousLocation = location;

	}

	// Overwrite with the new location.
	location = {
	x: x,
	y: y
	};

	}

	};

	// Return the API as our factory definition.
	return( api );

	}
	);


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


	// Define our document-click directive. This will evaluate the
	// given expression on the containing scope when the click
	// event is triggered.
	Demo.directive(
	"bnDocumentClick",
	function( $document, mouse ){

	// I connect the Angular context to the DOM events.
	var linkFunction = function( $scope, $element, $attributes ){

	// Get the expression we want to evaluate on the
	// scope when the document is clicked.
	var scopeExpression = $attributes.bnDocumentClick;

	// Bind to the document click event.
	$document.on(
	"click",
	function( event ){

	// Set the click coordinates in the mouse
	// service.
	mouse.setLocation(
	event.pageX,
	event.pageY
	);

	// Apply the scope expression so the
	// handler is invoked and the digest()
	// method is invoked implicitly.
	$scope.$apply( scopeExpression );

	}
	);

	// TODO: Listen for "$destroy" event to remove
	// the event binding when the parent controller
	// is removed from the rendered document.

	};

	// Return the linking function.
	return( linkFunction );

	}
	);


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


	// I am the controller for the Body tag.
	Demo.controller(
	"DemoController",
	function( $scope, mouse ) {

	// Set the initial X/Y values.
	$scope.mouseX = "N/A";
	$scope.mouseY = "N/A";

	// When the document is clicked, it will invoke
	// this method, passing-through the jQuery event.
	$scope.handleClick = function(){

	// Get the mouse location that has been updated
	// as result of the click event.
	var mouseLocation = mouse.getLocation();

	$scope.mouseX = mouseLocation.x;
	$scope.mouseY = mouseLocation.y;

	};

	}
	);


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


	</script>

	</body>
	</html>