AngularJS'de ng-tekrar kapsamı ile direktif izole kapsamı

İzole kapsamı olan bir yönergem var (böylece yönergeyi başka yerlerde yeniden kullanabilirim) ve bu yönergeyi bir ile ng-repeatkullandığımda çalışmıyor.

Bu konudaki tüm belgeleri ve Stack Overflow yanıtlarını okudum ve sorunları anladım. Her zamanki sorunlardan kaçtığıma inanıyorum.

Dolayısıyla, ng-repeatdirektif tarafından oluşturulan kapsam nedeniyle kodumun başarısız olduğunu anlıyorum . Benim direktifim bir izolat kapsamı yaratıyor ve üst kapsamdaki bir nesneye iki yönlü veri bağlama yapıyor. Yönergem bu bağlı değişkene yeni bir nesne-değeri atayacak ve yönergem olmadan kullanıldığında ng-repeat(ana değişken doğru şekilde güncellenir) bu mükemmel çalışır . Bununla birlikte, ile ng-repeatatama, ng-repeatkapsamda yeni bir değişken oluşturur ve ana değişken değişikliği görmez. Bütün bunlar okuduklarıma dayanarak beklendiği gibi.

Ayrıca, belirli bir öğe üzerinde birden çok yönerge olduğunda, yalnızca bir kapsamın oluşturulduğunu okudum. Ve prioritydirektiflerin uygulanma sırasını tanımlamak için her bir direktifte a ayarlanabilir; yönergeler önceliğe göre sıralanır ve sonra derleme işlevleri çağrılır ( http://docs.angularjs.org/guide/directive adresinde öncelik kelimesini arayın ).

Bu nedenle, yönergemin ilk önce çalıştığından ve sonunda bir izolat kapsamı oluşturduğundan emin olmak için önceliği kullanabileceğimi umuyordum ve ng-repeatçalıştırıldığında, ana kapsamdan prototip olarak miras alan bir kapsam oluşturmak yerine yalıtım kapsamını yeniden kullanır. ng-repeatBelgelerine durumları öncelik düzeyinde olduğu direktif ishal olduğunu 1000. Daha 1yüksek bir öncelik seviyesi mi yoksa daha düşük bir öncelik seviyesi mi olduğu net değildir . 1Direktifimde öncelik seviyesini kullandığımda bir fark yaratmadı, bu yüzden denedim 2000. Ancak bu işleri daha da kötüleştiriyor: iki yönlü bağlamalarım oluyor undefinedve yönergem hiçbir şey göstermiyor.

Sorunumu göstermek için bir keman oluşturdum . Yönergemdeki priorityayarı yorumladım . İsim nesnelerinin bir listesi ve isim nesnesindeki ad name-rowve soyad alanlarını gösteren bir yönergem var. Görüntülenen bir ada tıklandığında, selectedana kapsamda bir değişken ayarlamasını istiyorum . İsim dizisi, selecteddeğişken name-rowiki yönlü veri bağlama kullanılarak yönergeye aktarılır .

Ana kapsamdaki işlevleri çağırarak bunu nasıl çalıştıracağımı biliyorum. Ayrıca selectedbaşka bir nesnenin içindeyse ve dış nesneye bağlanırsam, her şeyin işe yarayacağını da biliyorum . Ancak şu anda bu çözümlerle ilgilenmiyorum.

Bunun yerine, sahip olduğum sorular:

• ng-repeatÜst kapsamdan prototip olarak miras alan bir kapsam oluşturmayı nasıl engelleyebilirim ve bunun yerine yönergemin izolat kapsamını kullanmasını nasıl sağlayabilirim?
• 2000Direktifimdeki öncelik seviyesi neden çalışmıyor?
• Batarang kullanarak, ne tür bir kapsamın kullanımda olduğunu bilmek mümkün mü?

Tamam, yukarıdaki birçok yorum sayesinde, kafa karışıklığını keşfettim. İlk olarak, birkaç açıklama noktası:

• ngRepeat, seçtiğiniz izolat kapsamını etkilemez
• senin yönerge niteliklerini kullanılmak üzere ngRepeat geçirilen parametreleri do bir prototip-miras kapsamı kullanın
• Yönergenizin çalışmama nedeninin izolat kapsamı ile ilgisi yoktur

Aşağıda, aynı kodun, ancak yönergenin kaldırıldığı bir örnek verilmiştir:

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

İşte çalışmayacağını gösteren bir JSFiddle . Direktifinizdekiyle aynı sonuçları alırsınız.

Neden çalışmıyor? Çünkü AngularJS'deki kapsamlar prototip kalıtımı kullanır. selectedÜst kapsamınızdaki değer ilkeldir . JavaScript'te bu, bir çocuk aynı değeri ayarladığında bunun üzerine yazılacağı anlamına gelir. AngularJS kapsamlarında altın bir kural vardır: model değerleri her zaman içlerinde bir a sahip olmalıdır .. Yani, asla ilkel olmamalıdırlar. Daha fazla bilgi için bu SO cevabına bakın .

İşte kapsamların başlangıçta neye benzediğinin bir resmi.

İlk öğeye tıkladıktan sonra, kapsamlar artık şöyle görünür:

selectedNgRepeat kapsamında yeni bir özelliğin oluşturulduğuna dikkat edin. Denetleyici kapsamı 003 değiştirilmedi.

İkinci öğeye tıkladığımızda ne olacağını muhtemelen tahmin edebilirsiniz:

Yani sorununuz aslında hiç ngRepeat'ten kaynaklanmıyor - AngularJS'de altın bir kuralı ihlal etmekten kaynaklanıyor. Düzeltmenin yolu basitçe bir nesne özelliği kullanmaktır:

$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 bunun da işe yaradığını gösteren ikinci bir JSFiddle .

Kapsamlar başlangıçta şöyle görünür:

İlk öğeye tıkladıktan sonra:

Burada, denetleyici kapsamı istenildiği gibi etkilenir.

Ayrıca, bunun bir izolat kapsamı ile direktifinizle hala çalışacağını kanıtlamak için (çünkü bunun sizin sorununuzla hiçbir ilgisi yoktur), işte bunun için de bir JSFiddle , görünümün nesneyi yansıtması gerekir. Gerekli tek değişikliğin ilkel yerine bir nesne kullanmak olduğunu fark edeceksiniz .

Başlangıçta kapsamlar:

İlk öğeye tıkladıktan sonra kapsamlar:

Sonuç olarak: Bir kez daha, sorununuz izolat kapsamı ile değil ve ngRepeat'in nasıl çalıştığı ile ilgili değil. Senin sorunun, tam da bu soruna yol açtığı bilinen bir kuralı çiğniyor olman. AngularJS'deki modeller her zaman bir ..

Doğrudan sorularınızı cevaplamaktan kaçınmaya çalışmadan, bunun yerine şu kemana bir göz atın:

http://jsfiddle.net/dVPLM/

Kilit nokta, Angular'ın geleneksel davranışıyla savaşmaya ve onu değiştirmeye çalışmak yerine, yönergenizi ng-repeatgeçersiz kılmaya çalışmak yerine üzerinde çalışacak şekilde yapılandırabilmenizdir .

Şablonunuzda:

    <name-row 
        in-names-list="names"
        io-selected="selected">
    </name-row>

Direktifinizde:

    template:
'        <ul>' +      
'            <li ng-repeat="name in inNamesList" ng-class="activeClass($index)" >' +
'                <a ng-click="setSelected($index)">' +
'                    {{$index}} - {{name.first}} {{name.last}}' +
'                </a>' +
'            </li>' +
'        </ul>'

Sorularınıza yanıt olarak:

• ng-repeat bir kapsam yaratacaksa, bunu gerçekten değiştirmeye çalışmamalısınız.
• Yönergelerde öncelik sadece yürütme sırası değildir - bakınız: AngularJS: HTML derleyicisi derleme sırasını nasıl düzenler?
• Batarang'da performans sekmesine bakarsanız her kapsam için bağlı ifadeleri görebilir ve bunun beklentilerinize uygun olup olmadığını kontrol edebilirsiniz.