Tag Archives: Scope

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 üçüncü bölümünde scope ayrımı üzerinde durmuştuk. Bu bölümde ise ayrılmış(isolated) scope bölgelerine dışarıdan erişimin nasıl yapılacağı üzerinde duracağız.

Bir direktifin scope ayrımını yaparken direktif nesnesine scope:{} şeklinde bir üye eklemesi yapılmaktadır. Bu durumda direktifin dış bağlantısı kesilir.  Ayrılmış direktiflerin dışındaki bir controller scope bölgesine veya başka bir direktifin scope bölgesine erişmek mümkün değildir. Ancak direktif tarafında belirlenen dış üyelere izinler verilerek onlara erişmek mümkündür. Bunu üç farklı şekilde yapabiliriz.

• “@”
• “=”
• “&”

“@” scope erişimi

Direktif dışındaki bir değişkenin metinsel değerine erişmek için kullanılır.

Bu örnekte ColorController içerisinde tanımlanmış olan $scope.hex değişkeninin metin değerine ulaşılmıştır. Yani @ scope türü string değerlere erişimi sağlar.

Dikkat edecek olursak HTML tarafında kullanım <color hex=”{{hex}}”></color> şeklindedir.

“=” scope erişimi

Direktif dışındaki değişkenin kendisine erişmek için kullanılır.

Dikkat edecek olursak HTML tarafında kullanım <color hex=”hex”></color> şeklindedir. Yani metinsel değere erişim olmadığından “{{}}” şeklinde bir kullanım yapılmıyor.

“&” scope erişimi

Direktif dışındaki bir fonksiyona erişmek için kullanılır. Bir başka deyişle direktifin dışındaki bir controller scope üzerindeki fonksiyona direktif tarafından erişmek için kullanılır. Örneğin metin kutusuna tıklandığında rastgele renk kodu üreten bir direktif için aşağıdaki örneği inceleyebilirsiniz.

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 üçüncü bölümü direktiflerin scope ayrımı(isolate scope) hakkında olacaktır. scope ayrımı yapılırken iki önemli nokta vardır. Birincisi direktifin üst scope bölgelerinden ayrıştırılması. İkincisi direktiflerin ortak scope bölgelerinden ayrıştırılmasıdır.

1-Direktifin Üst scope Bölgelerinden Ayrıştırılması

Direktifler varsayılan olarak bir üst scope bölgesine erişebilecek şekilde ayarlanmıştır. Ancak her direktifin kendine ait bir scope bölgesi de vardır.

Bu direktif bir üst scope tarafından gelen location nesnesine ait bilgilere erişebilmektedir.

 <div ng-controller="LocationCtrl">
    <location></location>
</div>

Yani LocationCtrl içerisinde tanımlanan $scope.location nesnesine direktif tarafından doğrudan erişim sağlanabilmektedir. Bunu önlemek için direktif nesnesine scope:{} şeklinde bir tanımlama yapılır.

Artık LocationCtrl içerisinde tanımlanan $scope.location nesnesine direktif tarafından doğrudan erişilemez.

2-Direktifin Ortak scope Bölgelerinden Ayrıştırılması

Direktifler tanımlanırken data binding işlemi sırasında bir karışıklığa sebep olmamak adına scope ayrımını doğru yapılması gerekmektedir.

Örneğin renk kodlarını hexadecimal bir biçimde kullanıcıdan almayı amaçlayan  bir direktifimiz olsun.

Bu direktifi üç farklı renk için kullanmak istediğimizde aşağıdaki gibi bir durum ortaya çıkacaktır.

Bir renk kutusuna bir değer girdiğimizde diğerleri de aynı değeri alıyor. Bunun sebebi hex değişkeninin two-way-binding yani çift yönlü bağlantısı yaptığı halde direktifin scope bölgesinin ayrılmamış olmasıdır. Direktifin scope bölgesini ayırmak için scope:{} şeklinde bir tanımlama yapılır.

Bu şekilde her direktifi kendi scope bölgesinde çalışabilir hale getirmiş oluruz.

Dan Wahlin direktif scope ayrımı için durumu özetleyen bir grafik hazırlamış.

Bu grafiğe göre bir direktif bir üst controller’a ait scope bölgesine erişebiliyor ise shared yani paylaşılmış scope oluyor. Eğer erişemiyorsa isolated yani ayrılmış oluyor.