AngularJs: Scope hiyerarşisi içinde iki yönlü bağlam kullanımı

Google’ın desteklediği AngularJs framework’ünün ön plana çıkan özelliklerinden birisi de two-way binding denilen iki yönlü bağlam özelliğidir. Bu özelliği kullanarak, view’ın içine değişkenler atayıp controller içinden o değişkeni kontrol edebiliyoruz. Gerçekten de birçok işlemde büyük kolaylık sağlıyor.

Bu özelliği doğal olarak birçok farklı sayfada keyifle kullanırken bir yerde anlayamadığımız bir hatayla karşılaştık. View içerisine değer geliyor ama view’dan controller’a değer dönmüyordu. Yani üzerine basa basa söylenen two way binding, one way binding’e dönüşmüştü. Peki ne buna sebep oluyor?

AngularJs, scope oluştururken Dom hiyerarşini kopyalıyor. Bu yüzden parent scope un property’leri child scope oluşturulurken olduğu gibi aktarılıyor. Ama tabi ki oluşan child scope taki property değişiklikleri parent scope a yansımıyor.  Bu durum aslında JavaScript’in Prototype Inheritanceözelliğinden kaynaklanıyor. Scope da zaten aslında bir Javascript objesi.
örnek:

<body ng-app ng-init=”name=’World'”>
<h1>Hello, {{name}}</h1>
<div ng-controller=”HelloCtrl”>
Say hello to: <input type=”text” ng-model=”name“>
<h2>Hello, {{name}}!</h2>
</div>
</body>

 

Burada iki scope’un name property’si farklı değerler alacaktır.

Bunu aşmanın yolu ise property yerine obje kullanmak (dot notation). Çünkü parent scope’tan üretilen bütün child scope’larda da aynı objenin adres bilgisi tutulacağı için aynı değerler dönecektir.

<body ng-app ng-init=”thing = {name : ‘World’}”>
<h1>Hello, {{thing.name}}</h1>
<div ng-controller=”HelloCtrl”>
Say hello to: <input type=”text” ng-model=”thing.name“>
<h2>Hello, {{thing.name}}!</h2>
</div>
</body>

 

KAYNAK:
[Mastering Web Application Development with AngularJS, p.17]

Reklamlar

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Connecting to %s