Directive adı “myDirective”
olsun
Sayfa içersinde element olarak ismi “-” ile bölerek göstermektedir
<my-directive> </my-directive>
Directive oluşturmak için:
Directive() adında bir metot kullanıp Controller tanımlamasında
olduğu gibi Module’e bağlamamız
gerekmektedir.
script.js
angular.module("myApp",
[])
.directive('myDirective',
function(){
return
{
restrict:
'E',
template:
'Merhaba Dünya'
}
});
index.html
<my-directive></my-directive>
Element
Tipi Directive(E)
Restrict’e
atanan değerler ile Direvtive’i
kategorilendiriyoruz.
E element anlamındadır
script.js
.directive('myDirective', function(){
return {
restrict: 'E',
template: 'Merhaba Dünya'
}
html
<my-directive></my-directive>
örnek:
<!DOCTYPE
html>
<html>
<script src="https://code.angularjs.org/1.5.0/angular.js"></script>
<body
ng-app="myApp">
<esra-directive></esra-directive>
<script>
var
app
= angular.module("myApp",
[]);
app.directive("esraDirective", function() {
return {
restrict :'E',
template : "<h1>Fatih bilişim
okulu</h1>"
};
});
</script>
</body>
</html>
Element
Tipi Directive(A)
Attribute
Anlamındadır
script.js
.directive('myDirective', function(){
return {
restrict: 'A',
template: 'Merhaba Dünya'
}
html
<p my-directive></p>
örnek:
<!DOCTYPE
html>
<html>
<script src="https://code.angularjs.org/1.5.0/angular.js"></script>
<body
ng-app="myApp">
<esra-directive></esra-directive>
<p
esra-directive></p>
<script>
var
app
= angular.module("myApp",
[]);
app.directive("esraDirective", function() {
return {
restrict :'EA',
template : "<h1>Fatih bilişim
okulu</h1>"
};
});
</script>
</body>
</html>
Element
Tipi Directive(C)
Class
Anlamındadır.
script.js
.directive('myDirective', function(){
return {
restrict: 'C',
template: 'Merhaba Dünya'
}
html
<p class=”my-directive”></p>
örnek:
<!DOCTYPE
html>
<html>
<script src="https://code.angularjs.org/1.5.0/angular.js"></script>
<body
ng-app="myApp">
<esra-directive></esra-directive>
<p esra-directive></p>
<p class="esra-directive"></p>
<script>
var
app
= angular.module("myApp",
[]);
app.directive("esraDirective", function() {
return {
restrict :'EAC',
template : "<h1>Fatih bilişim
okulu</h1>"
};
});
</script>
</body>
</html>
Bir
Directive’e
Birden Fazla Kategori Eklemek
Varsayılan
olarak directive
tipi belirtmezasek
attribute tipinde directive
oluşur.Internet
Explorer desteği için Directive’ler
sadece Attribute
şeklinde tanımlanmalı
Hiç yorum yok:
Yorum Gönder