-
Notifications
You must be signed in to change notification settings - Fork 0
/
26.Lesson_special-directive.html
142 lines (83 loc) · 4.29 KB
/
26.Lesson_special-directive.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
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>26.Lesson_special-directive</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
<script>
var ControllerExample = angular.module("myapp", []);
ControllerExample.controller("mycontrol", function ($scope, $rootScope) {
});
ControllerExample.directive("hello", function () {
return {
template: '<div class="mydiv">Merhaba AngularJS Directive</div>',
}
})
ControllerExample.directive("elementmydirective", function () {
//Geriye değer döndürüyor
return {
restrict: 'E', // E : Element için, C : Class için, A ise Attribute için kısıtlama getirmektedir
template: '<div class="mydiv">First Element Mydirective Example</div>',
}
});
ControllerExample.directive("classmydirective", function () {
return {
restrict: 'C', // E : Element için, C : Class için, A ise Attribute için kısıtlama getirmektedir
template: '<div class="mydiv">First Class Mydirective Example</div>',
}
});
ControllerExample.directive("atrributemydirective", function () {
return {
//linkler fonksiyon döndürmektedir
link: function (scope, element, attrs) {
restrict: 'A', // E : Element için, C : Class için, A ise Attribute için kısıtlama getirmektedir
//element.css ile style biçimlendirmesi yapıldı
element.css({ 'background-color': 'brown', 'color': 'white' });
//substring ile oluşturulan atrribute'den gelen değerle metnin belli bir kısmı gösterildi
element.html(element.html().substring(0, attrs.atrributemydirective));
//Tıklanma özelliği eklemek için
element.on("click", function () {
alert("Bu Attribute'e tıklandı")
})
}
}
})
</script>
<style>
/* mydiv adında style class declare edildi */
.mydiv {
background-color: brown;
color: white;
height: 50px;
width: 250px;
text-align: center;
font-size: 20px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
</style>
</head>
<!--
AngularJS ile HTML etiketlerini yeni özellikler ile genişletmek mümkündür. AngularJS'de bu yeni özellikler Directive olarak adlandırılır.
Birden fazla Element, Class ve Attribute directive oluşturulabilmektedir.
İsimlendirme yaparken büyük harf içermemesine ve (-) tire kullanılmamasına dikkat edilmelidir.
-->
<body ng-app="myapp" ng-controller="mycontrol">
<hello></hello>
<br> Element Directive Field
<elementmydirective></elementmydirective>
<hr>
Class Directive Field
<div class="classmydirective"></div>
<hr>
Atrribute Directive
<div atrributemydirective="10">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean facilisis felis lectus, non accumsan tellus placerat
quis. Mauris luctus risus quis consectetur vulputate. Maecenas in odio eu metus cursus vestibulum. </div>
<div atrributemydirective="25">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean facilisis felis lectus, non accumsan tellus placerat
quis. Mauris luctus risus quis consectetur vulputate. Maecenas in odio eu metus cursus vestibulum. </div>
<div atrributemydirective="50">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean facilisis felis lectus, non accumsan tellus placerat
quis. Mauris luctus risus quis consectetur vulputate. Maecenas in odio eu metus cursus vestibulum. </div>
<div atrributemydirective="100">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean facilisis felis lectus, non accumsan tellus placerat
quis. Mauris luctus risus quis consectetur vulputate. Maecenas in odio eu metus cursus vestibulum. </div>
</body>
</html>