Angularjs Custom Directive Serisi-3 scope izolasyonu

8 Eki
  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.

Adsız

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.

Adsız

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ış.

image_thumb_56FB9433 (1)

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.

 

One thought on “Angularjs Custom Directive Serisi-3 scope izolasyonu

  1. Çok basitmiş aslında. Çok sağol şu konuyu pek anlamamıştım. Şimdi her şey aydınlandı. Örneklerin çok basit ve çok etkili. Olması gereken de bu zaten. Konu hakkında milyon tane yazı var uzattıkça uzatmışlar. Ne zaman isolated kullanıp ne zaman kullanmamam gerektiğini şimdi anladım. Şu anlatım tarzını hiç bozma. Asıl zor olanı en basit şekilde anlatmak. Çok sağol.

Comments are closed.