Basit bir directive oluşturalım. Modülümüze directive komutu ile directive imizi ekledik ve sayfamızda kullandık. Directive komutunun aldığı parametrelere göz atalım.
İlk olarak directive miz için istediğimiz adı girdik. Ve büyük harf ile başladığı kısımdan önce tire koyup kucuk harfler ile normal bir html elementi ekler gibi ekledik.
İkinci parametre ise directive in özelliklerini ayarladık ve return ile bildirimini yaptık.
Directive kendimiz özellik ekleyebiliriz ama önce mevcut özellikleri nasıl kullanabileceğimizi bir görelim.
Directive özelliklerini inceleyelim.
1.template
directive in ekrana basmasını istediğimiz şeyleri buraya yazıyoruz. Mesela bir div ve onun içinede girilen inputtaki bilgiyi eklemek olsun isteğimiz. Örnek ile gösterelim.
ng-model ile datayı çektik ve directive imizde zaten ekli olan {{ name }} ile inputtan girilen yazının ekrana basılmasını sağladık.
2.templateUrl
Element e eklemek istediğiniz bir sayfanın adını bildirdiğimiz özellik. Mesela
templateUrl : 'header.html'
3.restrict
Oluşturduğumuz elementin sayfaya ekleniş biçimini sınırlandırmamızı sağlar. 3 farklı harf ile özellik atayabiliriz.
'A' - sadece attribute yani özellik adı ile
<div merhaba-dunya></div>
'E' - sadece element olarak
<merhaba-dunya></merhaba-dunya>
'C' - sadece class özelliği ile eklenmeyi sağlar
<div class="merhaba-dunya"></div>
İstersek 'AE' gibi yada 'AEC' gibi değerler vererek birden fazla şekilde eklenmesini sağlayabiliriz.
4.controller
Directive e scope ve elementlere erişimi olan bir controller dahil etmemizi sağlar.
5.link
Directive yine scope ve element gibi DOM elemanlarına erişimi olan bir fonksiyon eklememizi sağlar. Controller dan farkı sonra derlenmesidir. Alttaki örnekte gördüğünüz gibi önce controller sonra link derlenmekte.
6.scope
Oluşturduğumuz directive lerin birbirinden bağımsız olmasını scope ile sağlarız. Alttaki örnekte scope eklemeden kullanımda birbirine bağımlı olduklarını görüyoruz.
Ve scope u eklediğimizde bağımsız olduklarını görüyoruz. Scope ların farklı kapsam özellikleri var başka bir derste onlarıda göreceğiz.Directive kullanımını çok kapsamlı olmasada anlatmaya çalıştım. Belirli bir konu dağılımı oluşturamadığım için anlatmadığım şeyleri daha sonra anlatacağım. Sonraki dersimizde görüşmek üzere.
Hiç yorum yok:
Yorum Gönder