Angularjs Custom Directive Serisi-2 Direktif Restriction Yapısı

1. Direktiflerin Tanımlanması
2. Direktif Restriction Yapısı
3. Scope Ayrımı
4. Ayrılmış Scope Tarafına Erişim
5. Direktif Kalıtımı (Inheritance)

Angularjs direktif serisinin ikinci bölümünde direktiflerin restrict üyesi üzerinde duruyor olacağız.

Bir direktif için restriction tanımlaması onun görünüm tarafında ne şekilde kullanılacağının göstergesidir. Direktif nesnesinin dört farklı restrict şekli vardır.

1. ‘A’ attribute türünde direktifler
2. ‘E’ element türünde direktifler
3. ‘C’ class türünde direktifler
4. ‘M‘ yorum türünde direktifler

1- Attribute (A) türünde direktif tanımlama

Bu tür direktifleri mevcut HTML elementler içerisinde direktif adını attribute şeklinde çağırarak kullanabiliriz. Örneğin uzun bir metnin 50 karakterlik kısmını gösterip geri kalanını “…” şeklinde kısaltarak gösteren örnek bir direktif hazırlayalım.

Direktifin adı truncate ve işlevi bir metnin 50 karakterini gösterip geri kalanını kırpmaktır. Kullanım şekli yukarıda HTML kısmında göründüğü gibi <p truncate /></p> şeklindedir.

2- Element (E) türünde direktif tanımlama

Element türündeki direktifleri mevcut bir HTML element içerisinde tanımlanmak zorunda değiliz. Bu direktiflerin kendisi HTML element gibi kullanılır. Örneğin bir lokasyon bilgisini longitude(boylam) ve latitude(enlem) şeklinde standartlaştırarak yazdıran bir direktif element türünde oluşturulabilir.

HTML kullanımı <location lon=”23.52″ lat=”42.12″></location> şeklindedir ve enlem boylam bilgileri değişken olarak belirtilmektedir. HTML attribute şeklinde belirtilen değişkenler direktifin scope üyesine aktarılmaktadır. Direktifin scope üyesine link fonksiyonundan erişilebilmektedir.

Direktiflerin link() fonksiyonunun parametreleri dependency injection yöntemiyle verilmez. Parametreler belli bir durum sırasına göre(positional) sıralanmıştır. Sıralama scope, attribute, element, controller şeklindedir.

3- Class (C) türünde direktif tanımlama

Direktifleri HTML elementlerinin class özelliklerini belirlemek için kullanabiliriz. Bu tür direktifler sadece class özelliği için çalışırlar. Örneğin 10 karakterden uzun metinleri kırmızı olarak işaretleyen bir direktif class türünde tanımlanabilir.

4- Comment (M) türünde direktif tanımlama

HTML tanımlaması içerisinde yorum satırı için tanımlanan direktif tipleridir. Yorum direktiflerinin tanımlanması diğer direktifler gibidir.

 app.directive("comment", function() {
    return {
        restrict: 'M',
        template: '<div>Yorum satırı...</div>'
    }
 })

Kullanım şekli de <! – – directive:comment – – > şeklindedir.

Direktifler için yukarıda tanımlanan 4 restrict özelliğinden en sık kullanılanlar element ve attribute şeklinde tanımlanan direktif türleridir.