Angular JS 6.Ders

Angular JS ile ilgili 5.dersimizde directive kullanımına değinmiştik ama directive özelliklerine detaylı olarak değinmemiştik. Bu dersimizde hem Angular JS nin DOM ile nasıl kullanılacağını hem de directive in link özelliği ile nasıl kullanılacağını göreceğiz.

Directive link özelliği 3 farklı parametre ile scope lara,elementlere erişmemizi bunlarda istediğimiz değişiklikleri yapabilmemizi sağlar.

Basit bir uygulama ile link özelliğinin kullanımını göstererek sonra kullandığımız şeyleri açıklayalım.

Uygulamamızda controllerda oluşturduğumuz diller dizisine scope ile erişerek sıralı şekilde gösterilmesini sağladık.

link scope,element ve attribute özellikleri ile directive üzerinde değişiklik yapabilmemizi sağlar.
scope sayfadaki datalara erişmemizi sağlar. Dikkat ederseniz controller da olduğu gibi başında $ işareti yok bundan başka bir derste söz edeceğiz. Element adındanda anladığınız gibi elementlere erişmemizi onlar üzerinde işlemler yapabilmemizi sağlar.

 link : function(scope,element,attribute){

angular.element directive i ile bir element oluşturabilirsiniz. Angular JS dahil edilmiş bir sayfada konsolda örneğin angular.element('<div>') yazdığınızda geriye [<div></div>] diye bi return alırsınız. ul elementimizi oluşturup diller değişkenimize dahil ettik.

            var diller = angular.element('<ul>');

element.append ile mevcut elementimize oluşturmuş olduğumuz elementi dahil ettik.

            element.append(diller);  

scope ile diller datasına erişip bir döngü kuruyor ve element directive imiz ile li elementi oluşturup diller array ımızdaki dataları text ile li element ine yazıyoruz.

            for(var i=0;i<scope.diller.length;i++){
       var dil = angular.element('<li>').text(scope.diller[i]);

Bu kısımda ise i nin döngü sayesinde tek ve çift olmasına göre li element imize css ile istediğimiz stil özelliklerini ekliyoruz.

                if(i%2)
                    dil.css({
                        'background-color':'#0af' 
                    });
                else
                    dil.css({
                        'background-color':'#5af'
                    });
             
ve en başta oluşturduğumuz diller yani ul elementine dil yani li element ini dahil ediyoruz.

                diller.append(dil);
            }
        }
    }


Belli başlı özelliklere değinmeye çalıştım başka bir derste görüşmek üzere.