SORU
25 Mart 2013, PAZARTESİ


AngularJS : Yönerge ng-repeat kapsamlı kapsamı izole

Bir kapsam izole bir Direktif var diğer yerlerde yönergesini yeniden böylece () ve ng-repeat, Bir ile bu yönerge kullandığımda çalışma başarısız olur.

Bu konuyla ilgili tüm belgeler ve stackoverflow cevapları okudum ve sorunları anlamak. Her zamanki sorunlar önlenmiş olduğuna inanıyorum.

Benim kod kapsamı ng-repeat Direktif tarafından oluşturulan nedeniyle başarısız olduğunu anlıyorum. Kendi talimatımı bir kapsam izole ve iki yönlü veri bağlama ebeveyn kapsamında bir nesne yok oluşturur. Görevim, yeni bir değer nesnesi bu bağımlı değişkene atar ve bu benim yönergesi ng-repeat (ana değişkeni doğru şekilde güncelleştirildi) olmadan kullanıldığında mükemmel çalışıyor. Ancak, ng-repeat atama ng-repeat kapsamında yeni bir değişken oluşturur ve üst değişken değiştirme değil. Tüm bu okuduğuma göre beklendiği gibi.

Belirli bir öğe üzerinde birden çok Yönerge vardır, tek bir kapsam oluşturulan da okudum. Ve o bir priority ayarlanabilir her Direktifi tanımlamak için sırayla hangi direktifleri uygulanır; yönergeler sıralanır tarafından öncelikli ve daha sonra kendi derleme fonksiyonları denir (Arama kelimesi öncelik http://docs.angularjs.org/guide/directive).

Yani yetkili biriyle görüşebilir kullanım önceliği emin olmak için talimatımı çalışan ilk ve biter oluşturma izole-kapsam ve zaman ng-repeat çalışır, yeniden kullanır izole-kapsam yerine oluşturma bir kapsam prototypically devralır üst kapsam. ng-repeat belgeleri bu yönerge öncelik seviyesi 1000 çalışan Birleşik Devletleri. 1 yüksek öncelikli bir seviyede ya da daha düşük bir öncelik düzeyi olup olmadığı belli değil. Benim yönergesinde öncelik seviyesi 1 kullanılan, 2000 denedim bir fark olmadı. Ama işleri daha da kötü yapar: benim bağlamaları undefined olmak ve talimatımı hiçbir şey görüntülenmez.

fiddle to show my issue bir oluşturduk. Benim Direktifi priority ayar diye biliyorum. Adı nesnenin ilk ve son adı alanları gösteren adı nesneler ve bir Direktif name-row aradım. Görüntülenen bir adı tıklandığında, ana kapsamında selected bir değişkeni ayarlamak istiyorum. Adları, selected değişken dizi name-row Direktife iki yönlü veri bağlama kullanarak geçti.

Ana kapsamındaki işlevlerini çağırarak bu işe almak için nasıl olduğunu biliyorum. Ben de selected başka bir nesne iç ve dış bağlıyorum nesne, işlerin olacağını biliyorum. Ama şu anda Bu çözümleri ilgilenmiyorum.

Bunun yerine, sorularım var

  • Nasıl prototypically üst kapsamdan devralır, ve yerine benim yönergesi kullanan bir kapsam oluşturma ng-repeat önlemek-kapsam izole edebilirim?
  • Neden benim yönergesinde öncelik seviyesi 2000 çalışmıyor?
  • Batarang kullanarak, bunu kullanmak içinde ne olduğunu bilmek mümkün mü?

CEVAP
26 Mart 2013, Salı


Tamam, yorum yukarıda bir sürü karışıklık keşfettim. İlk, açıklama noktaları bir çift vardır:

  • ngRepeat seçilmiş izole kapsamını etkilemez
  • parametreleri kabul özelliklerini kullanmak için ngRepeat içine geçtiyapınprototypically-miras kapsamı kullanın
  • sizin göreviniz çalışmıyor nedeni kapsam izole ile bir ilgisi yok

İşte yönergesi kaldırıldı ile aynı kod ama: bir örnek

<li ng-repeat="name in names"
    ng-class="{ active: $index == selected }"
    ng-click="selected = $index">
    {{$index}}: {{name.first}} {{name.last}}
</li>

Burada JSFiddle bir işe yaramaz olduğunu gösteren. Sizin göreviniz tam olarak aynı sonuçları elde edersiniz.

Neden çalışmıyor? AngularJS kapsam prototip miras kullanın. Ana faaliyet alanının 25 ** değerilkel. JavaScript, bu çocuk aynı değere ayarlar üzerine olacak anlamına gelir. AngularJS kapsamları altın bir kural vardır: model değerleriher zamanonları .. Yani, asla ilkel olmalıdır. Daha fazla bilgi için this SO answer bkz.


Burada kapsamları başlangıçta neye benzediğine dair bir resim.

enter image description here

İlk öğesini tıkladıktan sonra, kapsamları şimdi bu gibi görünüyor:

enter image description here

selected yeni bir özellik ngRepeat kapsamında oluşturulan dikkat edin. Denetleyicisi kapsam 003 değişmiş değildi.

Büyük ihtimalle biz ikinci tıklama ne olur: tahmin edebilirsiniz

enter image description here


Yani sorun aslında ngRepeat - AngularJS altın kuralı kırmak neden kaynaklanır. Bunu düzeltmek için en basit yolu, bir nesne özelliği kullanmak için:

$scope.state = { selected: undefined };
<li ng-repeat="name in names"
    ng-class="{ active: $index == state.selected }"
    ng-click="state.selected = $index">
    {{$index}}: {{name.first}} {{name.last}}
</li>

İşte bu da çalışır second JSFiddle bir gösteri.

Kapsamları gibi başlangıçta bak:

enter image description here

İlk madde tıkladıktan sonra:

enter image description here

Burada, denetleyici kapsamında istenilen şekilde etkilenen ediliyor.

Ayrıca, kanıtlanan bu hala çalışma ile yönerge ile izole kapsam (çünkü, yine, bu işle hiç ilgisi yok senin sorunun), burada bir JSFiddle bunu da görmelidir yansıtan nesne. Sadece gerekli değişikliği bir kullanım için olduğunu unutmayınnesneyerineilkel.

Kapsamları başlangıçta:

enter image description here

Kapsamları ilk öğesini tıklayarak: sonra

enter image description here

Yine, sorunun kapsamını izole değil ve ngRepeat nasıl çalıştığı ile değil bir kere. sonuç: Senin sorunun bu çok soruna neden olduğu bilinen bir kuralı çiğniyorsun. AngularJS modelleri her zaman . olmalıdır.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • andony5589

    andony5589

    7 Aralık 2011
  • kylelandry

    kylelandry

    9 AĞUSTOS 2007
  • PUSHER

    PUSHER

    11 HAZİRAN 2014