forked from zafarali/learning-angular
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path03-4-readinglist.html
129 lines (119 loc) · 3.07 KB
/
03-4-readinglist.html
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html>
<head>
<title>Directive Communcation</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('app', []);
app.controller("Ctrl", function($scope){});
//creates the <book> directive
app.directive("book", function(){
return {
restrict:"E",
scope:{},//this gives each <book> an isolated scope
controller: function($scope){
//creates a scope with functions and data
$scope.properties={
fiction:false,
thriller:false,
romance:false,
autobiography:false,
title:"",
author:"",
},
//binds functions to to the element as an API
this.makeFiction = function(){
$scope.properties.fiction = true;
}
this.makeThriller = function(){
$scope.properties.thriller = true;
}
this.makeRomance = function(){
$scope.properties.romance = true;
}
this.makeAbio = function(){
$scope.properties.autobiography= true;
}
this.setTitle = function(title){
$scope.properties.title=title;
}
this.setAuthor = function(author){
$scope.properties.author=author;
}
},
template: '<div>{{properties.title}} - {{properties.author}}</div>',
//A link function for when the <book> loads
link: function(scope, element){
//for demo purposes rolling over logs the properties of the book.
element.bind("mouseenter", function(){
console.log(scope.properties);
})
}
}
});
//we now define some custom attributes
app.directive("fiction", function(){
return {
require:"book", //this states that we can only attach this attribute to <book>'s
//gives us access to the controller defined in <book>
link:function(scope,element,attrs,bookCtrl){
bookCtrl.makeFiction();
}
}
});
app.directive("thriller", function(){
return {
require:"book",
link:function(scope,elem,attrs,bookCtrl){
bookCtrl.makeThriller();
}
}
});
app.directive("romance", function(){
return {
require:"book",
link:function(scope,elem,attrs,bookCtrl){
bookCtrl.makeRomance();
}
}
});
app.directive("autobiography", function(){
return {
require:"book",
link:function(scope,elem,attrs,bkCtrl){
bkCtrl.makeAbio();
}
}
});
//overrides the given title
app.directive("title", function(){
return {
require:"book",
link:function(scp, elm, attrs, bkCtrl){
bkCtrl.setTitle(attrs.title);
}
}
});
//overrides the given author
app.directive("author", function(){
return {
require:"book",
link:function(scp, elm, attrs, bkCtrl){
bkCtrl.setAuthor(attrs.author);
}
}
});
</script>
</head>
<body ng-app="app">
<div ng-controller="Ctrl">
<h4>Summer Reading List</h4>
<book autobiography title="The Pleasure of Finding Things Out" author="Richard Feyman"></book>
<book title="Behind Beautiful Forevers" author="Katherine Boo" fiction></book>
<book thriller autobiography title="Every Day is for the Thief"></book>
<book author="Lee Child" thriller fiction title="somethingsomething"></book>
<book romance fiction author="Ariel Schrag" title="Adam"></book>
</div>
</body>
</html>