learning-angular/03-3-directives.html at master · JsNuts/learning-angular · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html>
<head>
	<title>directives</title>
	<style>
		*{font-family: Tahoma; font-size: 1em;}
	</style>

	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>

<script>
var app = angular.module('booksApp', []);
app.controller("BooksController", function($scope){
	$scope.data = {timesloaded:1,books:5};
	$scope.loadMore = function(){
		$scope.data.timesloaded++;
		$scope.data.books += 5;
	}
});

//this directive talks to the scope.
app.directive("enter", function(){
	return function(scope,element,attrs){
		element.bind("mouseenter", function(){
			scope.$apply(attrs.enter);
			//applies the function defined by enter="..."
		})
	}
})
</script>
</head>
<body ng-app="booksApp">
<div ng-controller="BooksController">
	Number of loads: {{data.timesloaded}}
	<br />Books available: {{data.books}}
	<br />
	<span enter="loadMore()" style="cursor:pointer">	<b>Roll over to load more!</b>
	</span>
</div>
</body>
</html>