-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
53 lines (48 loc) · 1.78 KB
/
index.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
<html data-ng-app="myapp">
<head>
<title></title>
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="app/app.js"></script>
<script src="app/directives/module.js"></script>
<script src="app/directives/color_text.js"></script>
<script src="app/directives/color_red.js"></script>
<script src="app/directives/double_bind.js"></script>
<script src="app/directives/only_read_bind.js"></script>
<script src="app/directives/custom_click.js"></script>
<script src="app/directives/transclude.js"></script>
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.css">
</head>
<body class="container" ng-controller="demo">
<h1> AngularJS Directives!</h1>
<form role="form">
<div class="form-group">
<label>Name</label>
<input type="text" ng-model="name" name="name" placeholder="Name"> {{name}}
</div>
<div class="form-group">
<label>Surname</label>
<input type="text" ng-model="surname" name="surname" placeholder="surname"> {{surname}}
</div>
</form>
<hr>
<h3>Isolated scope examples</h3>
<span>Double binded wtih =</span>
<div double-bind="name"></div>
<span>Only read binded wtih @</span>
<div only-read="{{name}}"></div>
<span>Expresion with &</span>
<div><button custom-click="alert('hola')">click me!</button></div>
<hr>
<h3>Directive used as element, atribute or class</h3>
<div color-red>Atribute!</div>
<color-red>Element!</color-red>
<div class="color-red">Class!</div>
<hr>
<h3>You can define the priority of directives, to define the execution order</h3>
<div color-text="blue" color-red >What color I am?</div>
<hr>
<h3>Example of a directive using transclude</h3>
<warning>Error: something wrong happened!</warning>
</body>
</html>