09_AngularJs_CustomDirectives

Merhaba arkadaşlar, bu yazımda Custom Directives konusunu anlatacağım. Örneğin AngularJS’in kendi direktifleri ng ile başlayan şekildedir. Yani daha ayrıntılı anlatmak gerekirse daha önceki derslerimizde gördüğümüz ng-show gibi direktifleri kendimiz oluşturacağız. Şimdi örnek üzerinden konuyu anlatalım:

İndex.html

ng-app direktifi kullanılarak projemizin angularjs projesi olduğunu tanımladık. Görüldüğü gibi <student-person> tagları şeklinde yeni direktifler tanımlanmış ve projede kullanılmış. Şimdi bu direktiflerin nasıl oluştuğunu anlamak için app.js dosyamıza bakalım.

App.js

mainApp isminde değişken oluşturuldu ve angular modülümüz tanımlandı. Yeni bir direktif oluşturmak istiyorsak directive() metodunu kullanmamız gerekir.  Direktive() metodu bir nesne döndürmektedir. Bu nesnenin bazı özellikleri mevcuttur.

  • Restrict
  • Scope
  • Template veya templateUrl
  • Link
  • Controller

Restrict => direktifin tipini belirler. Direktiflerin 4 adet tipi vardır. Bunlar:

  • ‘A’=> Attribute tipinde direktif
  • ‘E’=> Element tipinde direktif
  • ‘C’=> Class tipinde direktif
  • ‘M’=>Yorum tipinde direktif

Scope =>  Direktifin kapsam alanını belirler.

  • Veriler ‘@’ String değişkeni kullanılarak dizge olarak geçirilir.
  • Veriler ‘=’ String değişkeni kullanılarak nesne olarak geçirilebilir.
  • Veriler ‘&’ String değişkeni kullanılarak bir fonksiyon olarak aktarılır.

Örnek olarak:

Template => Direktifler DOM üzerine yerleştirildiklerinde görüntülenmek isteniyorsa düz olarak HTML kodu yazılabilir. Yada herhangi bir dosyadaki *.html uzantılı dosyalar templateUrl sayesinde eklenebilir.

Link => Direktifin link() metodunu direktifin DOM elementi ile temasa geçtiğinde init metot olarak bir kere çalışır.

Controller => Direktifin veri alışverişi yapmasını sağlar.

Bu yazımı burada bitiriyorum. Diğer yazılarımda görüşmek üzere…

Print Friendly, PDF & Email

Bir cevap yazın

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