learning-angular/03-6-elements.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
<!DOCTYPE html>
<html>
<head>
	<title>Streamlined Element Creation</title>
	<!--Here we demonstrate an easy way to create elements with attributes which we can display-->

	<!--Sad attempt at trying to make it resemble books-->
	<style>*{font-family: Tahoma; font-size: 1em;}
	.book{display:inline-block;min-width:100px;max-width:100px; min-height:220px; border:solid black 1px;}</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){});

app.directive("book",function(){
	return {
		restrict:"E",
		scope:{
			title:"@",//this @ signifies taking a string from the attributes
			author:"@",
			extraInformation: "@info"//this signifies that we should take the info attribute
		},
		template:'<div class="book">{{title}} by {{author}}<br /><br /><i>{{extraInformation}}</i></div>'
	}});
</script>
</head>
<body ng-app="app">
<div ng-controller="Ctrl">
<h3>Summer Reading List</h3>
<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="something something" info="summer is't complete without this!"></book>
<book author="Ariel Schrag" title="Adam" info="Interesting Story Line, Sounds like something Fresh!"></book>
</div>
</body>
</html>