Önceki derste Directiv’lere ufak bir giriş yapmıştık. AngularJS’nin en büyük avantajlarından biride kendi HTML elementlerini oluşturmasıdır bunu da directivler sayesinde gerçekleştiriyoruz. Örnek olarak htmlde aşağıdaki gibi bir element yok.
Örnek olarak basit bir directiv üzerinden gidelim
app.directive('vural', function () {
return {
restrict: 'EA',
template: '<div>[email protected]</div>'
};
});
app adındaki modülümüze directivi ekliyoruz. İlk parametreye html sayfasında kullanacağımız directivin adını ikici parametreye ise fonksiyonumuzu yazıyoruz. Directiv’in özelliklerini parametrelerle ekleyebililiyoruz.
Restrict ne işe yarar ?
Html sayfasında özel oluşturduğumuz elementi kullanma şeklimizi belirler örnek olarak
‘A’ => attribute name
‘E’ => element name
‘C’ => class name
bunları birliktede kullanabiliriz örnek olarak ‘AE’
Template
Template ise içerik olarak ne basmak istiyorsak burada onu belirtiriz. Yukarıydaki örnekte div içinde bir yazı yazılmış.
Link
Link parametresinde ise fonksiyon yazıyoruz. Template kısmını biraz daha geliştirmek istersek burada fonksiyon yazarak halledebiliriz. Aşağıda da belirtildiği gibi 4 parametresi var
Directivlerden kısaca bahsettikten sonra ufak bir örnek gösterelim.
