AngularJS Özel Direktivler – (AngularJS Custom Directives)

Ö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.

<vural></vural>

Örnek olarak basit bir directiv üzerinden gidelim

var app = angular.module('app', []);
  app.directive('vural', function () {
      return {
          restrict: 'EA',
          template: '<div>vuralusenc@gmail.com</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

link: function vural(scope, elem, attr, ctrl){}

Directivlerden kısaca bahsettikten sonra ufak bir örnek gösterelim.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Şu HTML etiketlerini ve özelliklerini kullanabilirsiniz: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>