AngularJS - Custom HTML Directive Oluşturma

AngularJS'de HTML genişletilmesi özelliği olduğundan bahsetmiştim. Bu özelliğe göre kendi HTML taglarımızı, directivelerimizi oluşturabiliriz.

directive('directiveAdi',function()) metodu ile custom directive oluşturabiliriz.directiveAdi ile directivimize isim verebiliriz. Tanımlamamızı yaptıktan sonra belirli özellikler atamamız gerekiyor. Fonkiyonumuzun return bloğu içerisinde tanımlayacağımız başlıca özellikler vardır. En önemli iki tanesi;

restrict : Directive'mizin türünü belirtir. Alacağı değerler ise

• E -> Element(Tag) 
• A -> Attribute
• C -> Class
• M -> Yorum Satırı

restrict: 'EA' demek bu directivemiz hem element hem de attribute olacaktır. 

template : Directive'mizin içinde barındıracağı kodları içerir.

Element Directive

<script>
    var app = angular.module('myApp', []);
    app.directive('mert', function () {
        return {
            restrict: 'E',
            template: '<form method="post">Kullanıcı Adı: <input type="text" name="name" value="" /><br/>Şifre:<input type="text" name="name" value="" /><br/><button>Giriş Yap</button></form>'
        };
    });
</script>

Kullanımı: <mert></mert>

Çıktısı

Kullanıcı Adı:
Şifre:

Class Directive

<script>
    app.directive('mert', function () {
        return {
            restrict: 'C',
            template: '<div><p>Mert</p><hr/><a href="#"><b><mark></mark></b></a></div>'
        };
    });
</script>

Kullanımı: <div class="mert"></div>

Atrribute Directive

<script>
   app.directive('mert', function () {
        return {
            restrict: 'A',
            template: '<div><p>Mert</p><hr/><a href="#"><b><mark></mark></b></a></div>',
            replace: true
        };
    });
</script>

Kullanımı:  <div mert></div>

Yorum Satırı Directive

<script>
   app.directive('mert', function () {
        return {
            restrict: 'M',
            template: '<div><p>Mert</p><hr/><a href="#"><b><mark></mark></b></a></div>',
            replace: true
        };
    });
</script>

Kullanımı:  <!-- directive: mert-->

Önemli Uyarı: Directive metodunda, directive isimleri küçük olmak zorundadır. Aşağıdaki hatayı alırız aksi durumda...

Hatamızda ilk harfi küçük harf(lowercase letter) olması gerektiğini belirtmiş. Bu hataya F12 de Console'dan ulaştım.