1
AngularJS Directives nedir?
AngularJS Directives nasıl kullanılır?
AngularJS Directives ne işe yarar?
2
AngularJS Directives nedir? AngularJS Directives nasıl kullanılır?
AngularJS ile HTML etiketlerini yeni özellikler ile genişletmek mümkündür. AngularJS'de bu yeni özellikler Directive olarak adlandırılır.
AngularJS kendi içinde ön tanımlı pek çok özellik barındırır. Aynı zamanda AngularJS size kendi özelliklerinizi yaratma fırsatı verir.
AngularJS direktifleri ng- ön eki ile başlar.
Baı örnek AngularJS direktifleri:
AngularJS Directive oluşturma
Aşağıda örnek bir AngularJS direktifi örneği bulabilirsiniz.
<html >
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body >
<body ng-app="uygulamam">
<ilk-test-direktifi></ilk-test-direktifi>
<script>
var app = angular.module("uygulamam", []);
app.directive("ilkTestDirektifi", function() {
return {
template : "<h1>Direktif tarafından oluşturuldu!</h1>"
};
});
</script>
</body>
</body>
</html>Script kodunda öncelikle modül oluşturuluyor. Daha sonra app.directive fonksitonu ile direktifi oluşturuyoruz. Dikkat ederseniz direktif adı (ilkTestDirektifi) camel Case isimlendirme yöntemi ile yazılıyor. Yani ilk harf küçük, daha sonra her kelimenin ilk harfi büyük.
Fakat direktifi HTML içinden çağırırken bu sefer kelime aralarına - işareti koyuyoruz: ilk-test-direktifi
Bir direktifi aşağıdaki şekillerde çağırabilir, kullanabilirsiniz:
Oluşturduğumuz bu direktifi aşağıdaki gibi de kullanabilirdik:
Element adı olarak kullanıma örnek:
<div ilk-test-direktifi></div>veya class olarak da çağırabilirdik:
<div class="ilk-test-direktifi"></div>Class olarak çağıracaksanız şu şekilde kullanmalısınız:
<script>
var app = angular.module('app', []);
app.directive("ilkDirektif", function () {
return {
template: '<h1>direktif tarafından oluşturuldu</h1>',
restrict:'C'
}
})
</script>Yani return ifadesine özellik olarak restrict:'C' eklemelisiniz.
Yorum olarak kullanacaksanız
<script>
var app = angular.module('app', []);
app.directive("ilkDirektif", function () {
return {
restrict: "M",
replace: true,
template: '<h1>direktif tarafından oluşturuldu</h1>'
}
})
</script>
<!-- directive: ilk-direktif -->restrict: "M", replace: true özellikleri yorum olarak kullanılacaksa yukarıdaki gibi kullanılmalıdır.
Restrictions (Kısıtlamalar)
Yukarıda yazdığım gibi direktifi 4 farklı şekilde kullanabiliriz. Fakat Class ve Yorum olarak kullanmak varsayılan olarak engellenmiştir. Siz açmak isterseniz yukarıdaki örnekteki gibi restrict özelliği üzerinden ayarlamalısınız.
Kısıtlamalarda kullanılan harfler ve anlamları şu şekilde:
Varsayılan olarak EA açık olarak gelir.
Cevap yazabilmek için üye girişi yapmalısınız.
Eğer uzmanim.net üyesiyseniz giriş yapabilirsiniz: üye girişi yap
uzmanim.net'e üye olmak çok kolaydır: hemen kayıt ol
hakan (30) 
darkcrak (10) 
sselim (5) 
mat7 (5)