AngularJS custom directive link example

		var myModule = angular.module("myModule", []);  
		myModule.controller('BooksController',   
		function BooksController($scope) {	
			$scope.book = {  
				name:'The Tempest',   
				author:'William Shakespeare'  
			};  
			
		});  
		
		myModule.directive('myBook', function () {
		return {
			scope: {
				book: '='
			},
			template: 
				'Name: {{book.name}}, Author: {{book.author}}',
			link: 
				function ($scope, element, attrs) {
					element.bind('click', function () {
						element.html('You clicked the book: '
							+ $scope.book.name);
					});
					element.bind('mouseenter', function () {
						element.css('color', 'yellow');
						element.css('background-color', 'blue');
					});
					element.bind('mouseleave', function () {
						element.css('color', 'white');
						element.css('background-color', 'black');
					});
				}	
		};
		});

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title>Learning AngularJS</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link href="style.css" rel="stylesheet" />
    <script data-semver="1.2.25" src="https://code.angularjs.org/1.2.25/angular.js" data-require="angular.js@1.2.x"></script>
    <script src="app.js"></script>
  </head>

<body ng-app="myModule">
	<div ng-controller="BooksController">  
		<div my-book book="book"></div>
	</div>  
</body>

</html>

/* Put your css in here */