İçeriğe geç

Angular Öğreniyorum Serisi – 2

Bu paylaşımda Angular js ile Custom Directive oluşturmanın temellerini göreceğiz.

Angular’a yeni başlayanların çoğu Custom Directiveler için yüksek seviyeli şeyler olarak ve anlaşılması zor bir konu gibi düşünürler. Bundan dolayı bunu çalışmayı ertelerler. Eğer siz de bu durumdaysanız bu ders Angular js içindeki Custom Directive’ler hakkındaki düşüncenizi değiştirecektir.

 

Temel Sözdizimi

var testApp = angular.module('testApp',[]);
testApp.directive('myDirective',function(){
    return {
       //OPTIONS
    }
});

testApp sizin Angular uygulamanız veya modulünüzdür ve ona Directive’yi bağlarız. myDirective directive’nizin ismidir. Dikkat edilmeli ki isim için camel case kullandık.
Şimdi Document Object Model’imizin içine directive’mizi çağırmalıyız.

 <body ng-app="testApp">
      <my-directive>
      </my-directive>
 </body>

İsimdeki <my-directive> kısmına dikkat edin! Camel Case kullanımı bir tire ile değiştirildi. Bir directive’nin çalışması için bu önemlidir.

Biz ona seçenek belirtmediğimiz için henüz hiçbir şey yapmaz. Buna rağmen elimizde bir directive var. Haydi şimdi  seçenekleri buraya belirtelim.

Directive içinde dönen nesneye bunu ekleyin.

    return {
        restrict:'AEC',
        template:'<label>My Directive: <input type="text" class="form-control"/><label>'
    }

restrict ‘AEC’: – Bu kısıtlar directive’nin HTML içinde nasıl çağırılacağının yoludur.

“A” attribute içindir, “E” element için ve “C” class içindir.

Yani durumumuza göre directive’mizi attribute, element veya class gibi kullanabiliriz. Yararlanmak için aşağıdaki koda bakın.

<body ng-app="testApp">
        <h4>Invoked as an element</h4>
        <my-directive>
        </my-directive>
        <h4>Invoked as a class</h4>
        <div class="my-directive"></div>
        <h4>Invoked as an attribute</h4>
        <div my-directive></div>
</body>

Biz ayrıca bir şablon belirledik, Bu şablon (template:template:'<label>My Directive: <input type=”text” class=”form-control”/><label>’) directive’mizi nerede kullanırsak Document Object Model’de işlenecek.

Not: Template yerine, HTML şablon getirmek için bir URL belirtebilirsiniz.
Şablon yerine templateURL kullanın.

Uygulamamda çoklu yerlerde kullandığım kullanıcının yüzünü gösteren ve css3 karartma geçişi yapan basit bir şablonum var.

Demo için bakın: Burada

Kodu indir: Burada

Bu demo’da siyah bant görüntüsü templateUrl ile birlikte bir directivedir. Bu directive 2 yerde kullanılır.

Ayrıca dikkat edilmesi gereken, bu demo directive’nin temellerini gösterir. Örnekteki DOM kullanımı directive içinde olmalıdır ve onun için jquery kullanımına ihtiyaç yoktur.

CSS3 karartmasının nasıl oluşturulacağını öğrenmek için burayı inceleyin.

Ayrıca çağrılan directive içinde kontrollerin kapsamına erişebilirsiniz. Direktifler aynı zamanda kendi ayrı denetleyicileri olabilir.

Kaynak: http://code.ciphertrick.com/2015/01/04/custom-directives-in-angular-js-for-beginners

Tarih:Angular

İlk Yorumu Siz Yapın

Bir cevap yazın

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.