AngularJS’ te controller lara http://angulartr.com/angularjs-controllers/ adresinde konuda giriş yapmıştık. Lakin projeniz büyüdükçe nested yani içi içe controller da bazı problemler yaşamaya başlayabilirsiniz.

Örneği aşağıda paylaştığım koda bakalım

AngularJS Controllers on jsbin.com

Gördüğünüz üzere 3 tane controller var, view’ da hepsi iç içe eklenmiş durumda. YetAnotherCtrl isimli en içteki controller da title modeli tanımlanmamış lakin bu model, parent controller ların ilkinde yani örneğimizdeki AnotherCtrl isimli controller da tanımlanmış olduğu için, javascript’ in scope yaklaşımından dolayı, YetAnotherCtrl controller ımızda, bu model kendisinde tanımlıymış gibi davranabilip another title değerini basmış.

Bu bir sorun olabiliyor.

Çünkü view’ da hangi controller da hangi değerin olup olmadığını control etmeniz zorlaşıyor.

Şöyle düşünün;

En içteki controller da(YetAnotherCtrl) title adında bir model, uygulama çalışmaya başladığında tanımlı olmayacak. Aynı yukarıdaki örnekteki gibi, lakin kullanıcının yaptığı işlemlere göre, YetAnotherCtrl da title modeli tanımlanacak, değer alacak. Siz bunu biliyorsunuz. Ve tanımlandığı anda göstermek istiyorsunuz. Ama yukarıdaki örneğe baktığımızda, YetAnotherCtrl da title modeli tanımlanıp kendi değerini alana kadar ekranda another title yazıyor. Bu bir sorun değil mi? SORUN.

Yaşayacağınız problemler sizin uygulamanıza göre değişebilir. Ben en basit örneği verdim. İşte bunu çözmek adına, 1.2.0 versiyonunda Controller As Syntax özelliği getirildi. Kullanımı çok basit. Aşağıda as syntax’ ı ile yukarıda örneği değiştirdim. Hemen sonuca bakın. Sonrada kodu inceleyelim.

AngularJS Controllers on jsbin.com

Gördüğünüz gibi YetAnotherCtrl controllerının hakim olduğu html bloğunda, title basılmadı. Halbuki bir üst(parent) controller da title modeli tanımlı değil mi ? Tanımlı. Değer varmı ? var. Neden o değeri alıp basmadı ?

Çünkü ng-controller attribute lerindeki controller eklemelerine bakarsanız, hepsinde controller lardan as  ifadesi ile referans alındı. Ardından bind yapılan yerlerde bu referans üzerinden bind yapıldı.

Yani demiş oldukki, ben title modelini bind etmek istiyorum, LAKİN sadece referans aldığım controller’ ın içindeki modeli bind ederim. Üst controller larda aynı isimdeki modeli istemiyorum.

Bir diğer dikkat etmeniz gereken nokta ise, $scope yerine this ifadesini kullandık. Çünkü ben controllerımda model tanımlarken, tüm scope boyunca değil, sadece kendi controllerımda tanımlamak istiyorum.

Bu sayede uygulamamızın bütünlüğünü korumuş oluyoruz.

Peki üst controller lardan aynı yada başka bir modele erişmek istersem ?

Çok basit, bind ederken, ulaşmak istediğiniz controller ın referansını yazmanız yeterli. Aşağıda bunuda örnekledim.

AngularJS Controllers on jsbin.com

2 Comments AngularJS – Controller As Syntax

  1. Hüseyin Kaya

    bu sayfadaki örnekleri göremiyoruz, pro account alman gerekiyormuş. Onun dışında dersleri anlatımın ve örnekleri vermen çok güzel.. eline sağlık, devamını bekliyoruz..

    Reply

Leave A Comment

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