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
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.
İlk öğesini tıkladıktan sonra, kapsamları şimdi bu gibi görünüyor:
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
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:
İlk madde tıkladıktan sonra:
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:
Kapsamları ilk öğesini tıklayarak: sonra
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.
Bir yönerge yazarken, nasıl bir yeni b...
AngularJS : izole kapsamında olmayan b...
Nasıl AngularJS Test İzole Kapsam Yöne...
Nasıl kendi kapsamı ile özel bir yöner...
Nasıl (anahtar, değer) AngularJs ng-re...