Bunu anlıyorum ng-showve ng-hidebir öğe üzerinde ayarlanan sınıfı etkiliyor ve bir öğenin ng-ifDOM'un bir parçası olarak işlenip işlenmediğini kontrol ediyor.
Fazla / veya tam tersini seçme ng-ifkonusunda yönergeler var mı?ng-showng-hide
Yanıtlar:
Kullanım durumunuza bağlıdır, ancak farkı özetlemek gerekirse:
ng-ifDOM'dan öğeleri kaldıracak. Bu, tüm işleyicilerinizin veya bu öğelere eklenmiş olan herhangi bir şeyin kaybolacağı anlamına gelir. Örneğin, bir tıklama işleyicisini alt öğelerden birine ng-ifbağlarsanız, false olarak değerlendirildiğinde, bu öğe DOM'dan kaldırılır ve tıklama işleyiciniz daha sonra ng-iftrue olarak değerlendirildikten ve öğeyi görüntüledikten sonra bile çalışmayacaktır . İşleyiciyi yeniden takmanız gerekecektir.ng-show/ng-hideöğeleri DOM'dan kaldırmaz. Öğeleri gizlemek / göstermek için CSS stillerini kullanır (not: kendi sınıflarınızı eklemeniz gerekebilir). Bu şekilde çocuklara bağlı olan işleyicileriniz kaybolmaz.ng-ifiken bir çocuk kapsamını oluşturur ng-show/ng-hidedeğilDOM'da bulunmayan öğelerin daha az performans etkisi vardır ve web uygulamanız, kullanırken ng-ifkarşılaştırıldığında daha hızlı görünebilir ng-show/ng-hide. Deneyimlerime göre, fark göz ardı edilebilir. Animasyonlar her ikisini de kullanırken ng-show/ng-hideve ng-ifher ikisi için de Açısal belgelerdeki örneklerle mümkündür .
Sonuç olarak, cevaplamanız gereken soru, öğeyi DOM'dan silip edemeyeceğinizdir?
ng-if. Animasyonlar paragrafını ve dokümanlardaki örneği kontrol edin . Ayrıca gizli elemanlar da sayılacağı ng-hide/ng-showiçin css seçicileri gibi :first-childveya :nth-childdüzgün çalışmaz.
ng-ifyeni bir kapsam oluşturur ng-showancak oluşturmaz.
Ng-if / ng-show'un nasıl çalıştığındaki farkı DOM-wise gösteren bir CodePen için buraya bakın .
@markovuksanovic soruyu iyi yanıtladı. Ama başka bir perspektiften gelecektim: Bu unsurları her zaman kullanırım ng-ifve DOM'dan çıkarırım, yoksa:
$watch, görünmez durumdayken öğelerinizdeki veri bağları ve -es öğelerinin etkin kalması gerekir. Tüm formun geçerli olup olmadığını belirlemek için, halihazırda görünmeyen girdilerin geçerliliğini kontrol etmek istiyorsanız formlar bunun için iyi bir durum olabilir.Açısal gerçekten iyi yazılmış. Ne yaptığını düşünerek hızlı. Ancak yaptığı, zor şeyleri (2 yönlü veri bağlama gibi) önemsiz bir şekilde kolaylaştıran bir sürü sihir. Tüm bu şeylerin kolay görünmesi bazı performans yüklerini gerektirir. Bir setter fonksiyonunun $digest, hiç kimsenin bakmadığı bir DOM yığınında döngü sırasında yüzlerce veya binlerce kez değerlendirildiğini fark etmek şok olabilir . Ve sonra hepsi aynı şeyi yapan onlarca veya yüzlerce görünmez öğeye sahip olduğunuzu anlıyorsunuz ...
Masaüstü bilgisayarlar çoğu JS yürütme hızı sorununu tartışacak kadar güçlü olabilir. Ancak mobil cihazlar için geliştiriyorsanız, insanca mümkün olduğunda ng-if kullanmanın bir beyinsiz olması gerekir. JS hızı mobil işlemciler için hala önemlidir. Ng-if kullanmak, çok, çok düşük maliyetle potansiyel olarak önemli bir optimizasyon elde etmenin çok kolay bir yoludur.
ng-showvarsa, her birinin oluşturulması zaman alan çok fazla içeriğe sahip sekmeler varsa yararlı olabilir. İlk oluşturma işleminden sonra, sekmeler arasında hareket etmek anında gerçekleşecek, buna karşılık ng-ifyeniden oluşturma, bağlama olayları vb. Gerektirecektir. Açısal umutsuzca ihtiyacıng-ifshowwatch
Deneyimlerimden:
1) Sayfanızda bir şeyi göstermek / gizlemek için ng-if / ng-show kullanan bir geçiş varsa, ng-if daha fazla tarayıcı gecikmesine neden olur (daha yavaş). Örneğin: iki görünüm arasında geçiş yapmak için kullanılan bir düğmeniz varsa ng-show daha hızlı görünür.
2) ng-if, true / false olarak değerlendirildiğinde kapsam oluşturur / yok eder. Ng-if'ye bağlı bir denetleyiciniz varsa, ng-if her doğru olarak değerlendirildiğinde bu denetleyici kodu yürütülür. Ng-show kullanıyorsanız, denetleyici kodu yalnızca bir kez yürütülür. Bu nedenle, birden çok görünüm arasında geçiş yapan bir düğmeniz varsa, ng-if ve ng-show'u kullanmak, denetleyici kodunuzu yazma yönteminizde büyük bir fark yaratır.
Cevap basit değil:
Hedef makinelere (mobil ve masaüstüne) bağlıdır, verilerinizin doğasına, tarayıcıya, işletim sistemine, çalıştığı donanıma bağlıdır ... gerçekten bilmek istiyorsanız kıyaslama yapmanız gerekecektir.
Çoğunlukla bir bellek ve hesaplama sorunudur ... çoğu performans sorununda olduğu gibi, farklar tekrarlanan öğelerle (n) benzer listelerde, özellikle de iç içe geçmişken (nxn veya daha kötü) ve ayrıca bu öğelerin içinde ne tür hesaplamalar yaptığınızda önemli hale gelebilir :
ng-show : Eğer bu isteğe bağlı elemanlar sıklıkla varsa (yoğun), örneğin zamanın% 90'ı gibi, onları hazır bulundurmak daha hızlı olabilir ve özellikle içeriği ucuzsa (sadece düz metin, hiçbir şey) hesaplamak veya yüklemek için). Bu, DOM'u gizli öğelerle doldurduğundan belleği tüketir, ancak zaten var olan bir şeyi göster / gizle, tarayıcı için ucuz bir işlemdir.
ng-if : Aksine, öğeler gösterilmeyecekse (seyrek), özellikle içeriklerinin elde edilmesi pahalıysa (hesaplamalar / sıralı / filtrelenmiş, görüntüler, oluşturulan görüntüler) bunları gerçek zamanlı olarak oluşturun ve imha edin. Bu, nadir veya 'isteğe bağlı' öğeler için idealdir, DOM'u doldurmamak açısından bellek tasarrufu sağlar, ancak çok sayıda hesaplama (öğe oluşturma / yok etme) ve bant genişliğine (uzak içerik alma) mal olabilir. Ayrıca görünümde ne kadar hesapladığınıza (filtreleme / sıralama) ve modele zaten sahip olduğunuza (önceden sıralanmış / önceden filtrelenmiş veriler) bağlıdır.
Önemli bir not:
ngIf (ngShow'dan farklı olarak) genellikle beklenmedik sonuçlar doğurabilecek alt kapsamlar oluşturur.
Bununla ilgili bir sorunum vardı ve neler olduğunu anlamak için ÇOK zaman harcadım.
(Yönergem model değerlerini yanlış kapsama yazıyordu.)
Bu nedenle, çok yavaş koşmadığınız sürece saçlarınızı kurtarmak için ngShow'u kullanın.
Performans farkı zaten farkedilmez ve henüz test olmadan kimin lehine olduğundan emin değilim ...
$parent.scopevarBir ngIf içindeki veri bağlarında kullanmak , ngIf kullanırken çocuk kapsamı sorunları gibi şeyleri düzeltir
ngIfyerde bu performansı artıracak inanan insanlar gördüm . Bu sadece doğru değildir ve hangisinin en iyisi olduğunu söyleyemez ngIfveya ngShowbelirli bir durumda bir test veya derin bir analiz olmadan. Yani, ngIfbiri kötü bir performans görene veya ne yaptığını
ng-include ve on ng-denetleyicide ng-include üzerinde büyük bir etkiye sahip olacaksa, gerekli kısmi yüklemez ve ng-denetleyicide bayrak doğru olmadığı sürece işlem yapmaz, bayrak olmadığı sürece denetleyiciyi yüklemez true ama sorun bir bayrak ng yanlış olduğunda-bayrak true olduğunda DOM'dan kaldırırsa bu durumda DOM yeniden yükleyecek ng-show daha iyidir, bir kez ng-if daha iyi
ng-show or ng-hideİçeriği kullanırsanız (örn. Sunucudan küçük resimler), ifade değerine bakılmaksızın yüklenir, ancak ifadenin değerine göre görüntülenir.
Eğer ng-ifiçeriği kullanırsanız sadece ng-if ifadesi doğru olarak değerlendirilirse yüklenecektir.
Ng-if kullanmak, sunucudan veri veya görüntü yükleyeceğiniz ve bunları yalnızca kullanıcının etkileşimine bağlı olarak göstereceğiniz bir durumda iyi bir fikirdir. Bu şekilde sayfa yüklemeniz gereksiz yoğun yoğun görevler tarafından engellenmeyecektir.
srcniteliğini ararlar img, mevcut olduğunda yüklenir!