ng-ifVe ng-show/ arasındaki farkı anlamaya çalışıyorum ng-hide, ama onlar benim için aynı görünüyor.

Birini veya diğerini kullanmayı seçerken aklımda tutmam gereken bir fark var mı?

ngIf

ngIfYönerge kaldırır veya yeniden yaratmaktadır dayalı bir ifade DOM ağacının bir bölümü. ngIfYanlış bir değere değerlendirmek için atanan ifade DOM'dan kaldırılır, aksi takdirde öğenin bir klonu DOM'a yeniden eklenir.

<!-- when $scope.myValue is truthy (element is restored) -->
<div ng-if="1"></div>

<!-- when $scope.myValue is falsy (element is removed) -->
<div ng-if="0"></div>

Bir öğe ngIfkapsamı kullanılarak kaldırıldığında yok edilir ve öğe geri yüklendiğinde yeni bir kapsam oluşturulur. Oluşturulan ngIfkapsam, prototip mirasını kullanarak ana kapsamından devralır.

Eğer ngModeliçinde kullanıldığında ngIfana kapsamında tanımlanan bir JavaScript ilkel bağlanabilme, herhangi bir değişiklik, üst etki, örneğin değer etkilemez çocuk kapsamında değişken yapılan

<input type="text" ng-model="data">
<div ng-if="true">
    <input type="text" ng-model="data">
</div>        

Bu durumu aşmak ve üst kapsamdaki modeli alt kapsamın içinden güncellemek için bir nesne kullanın:

<input type="text" ng-model="data.input">
<div ng-if="true">
    <input type="text" ng-model="data.input">
</div>

Veya $parentüst kapsam nesnesine başvurmak için değişken:

<input type="text" ng-model="data">
<div ng-if="true">
    <input type="text" ng-model="$parent.data">
</div>

ngShow

ngShowYönerge gösterileri veya postlar sağlanan ifadesine dayalı verilen HTML öğesi ngShowözniteliği. Öğe, ng-hideCSS sınıfının öğeye kaldırılması veya eklenmesi ile gösterilir veya gizlenir . .ng-hideCSS sınıf angularjs önceden tanımlanmış ve (bir kullanarak hiçbiri görüntü stili belirlemektedir !importantbayrağı).

<!-- when $scope.myValue is truthy (element is visible) -->
<div ng-show="1"></div>

<!-- when $scope.myValue is falsy (element is hidden) -->
<div ng-show="0" class="ng-hide"></div>

Ne zaman ngShowiçin ifade değerlendirir falsesonra ng-hideCSS sınıf eklenir classneden elemanı üzerinde öznitelik gizlenir olmak. Ne zaman true, ng-hideCSS sınıfı öğeden kaldırılır ve öğenin gizli görünmemesine neden olur.

Belki ilginç bir nokta, her ikisi arasındaki öncelikler arasındaki farktır.

Anlayabildiğim kadarıyla ng-if yönergesi, tüm Açısal yönergelerin en yüksek (en yüksek değilse) önceliğinden birine sahiptir. Bu şu anlama gelir: diğer tüm düşük öncelikli direktiflerden önce İLK çalışır. İLK çalıştırdığı gerçeği, herhangi bir iç direktif işlenmeden önce öğenin etkili bir şekilde kaldırıldığı anlamına gelir . Ya da en azından ben bunu yapıyorum.

Şu anki müşterim için inşa ettiğim kullanıcı arayüzünde gözlemledim ve kullandım. Tüm kullanıcı arayüzü oldukça yoğun bir şekilde paketlenmiş ve her yerinde ng-show ve ng-hide vardı. Çok fazla ayrıntıya girmek değil, ama JSON config kullanarak yönetilebilen genel bir bileşen inşa ettim, bu yüzden şablonun içinde bazı anahtarlama yapmak zorunda kaldım. Bir ng-tekrar mevcut ve ng-tekrar içinde çok sayıda ng-şovu, ng-gizleme ve hatta ng-switchi bulunan bir tablo gösteriliyor. Listede en az 50 tekrar göstermek istediler, bu da aşağı yukarı 1500-2000 direktifinin çözülmesine neden olacaktı. Kodu kontrol ettim ve ön taraftaki Java arka ucu + özel JS, verileri işlemek için yaklaşık 150 ms sürdü ve ardından Angular görüntülemeden önce üzerinde 2-3 saniye çiğnedi. Müşteri şikayet etmedi, ama ben dehşete düştü :-)

Aramamda ng-if direktifine rastladım. Şimdi, belki de bu kullanıcı arayüzünü tasarlama noktasında, eğer mevcutsa, hiçbir şey olmadığını belirtmek en iyisidir. Ng-show ve ng-hide'in içinde booleans döndüren işlevleri olduğu için hepsini ng-if ile kolayca değiştirebilirim. Bu şekilde, tüm iç direktifler artık değerlendirilmemiştir. Bu, değerlendirilen tüm direktiflerin yaklaşık üçte birine düştüğüm anlamına geliyordu ve bu nedenle kullanıcı arayüzü yaklaşık 500ms - 1 sn yükleme süresine kadar hızlandı. (Kesin saniyeleri belirleme imkanım yok)

Unutmayın: Direktiflerin değerlendirilmemesi, altında neler olduğu konusunda eğitimli bir tahmindir.

Yani, bence: öğenin sayfada olması gerekiyorsa (yani, öğeyi kontrol etmek için veya herhangi bir şey), ancak sadece gizlenecekse, ng-show / ng-hide kullanın. Diğer tüm durumlarda ng-if kullanın.

ng-ifYönerge sayfasından içeriği kaldırır ve ng-show/ng-hideCSS kullanır displaygizlemek içeriğine özelliği.

Bu Kullanmak istediğiniz durumda yararlıdır :first-childve :last-childstiline sözde seçiciler.

@EdSpencer doğru. Çok sayıda öğeniz varsa ve yalnızca ilgili öğeleri somutlaştırmak için ng-if kullanıyorsanız, kaynak tasarrufu sağlarsınız. @CodeHater de biraz doğrudur, bir öğeyi çok sık kaldıracak ve gösterecekseniz, kaldırmak yerine gizlemek performansı artırabilir.

Ng-if için bulduğum ana kullanım durumu, içeriğin yasadışı olması durumunda bir öğeyi temiz bir şekilde doğrulamamı ve ortadan kaldırmamı sağlıyor. Örneğin, bir boş resim adı değişkenine başvurabilirim ve bu bir hata atar, ancak eğer ng-if ve null olup olmadığını kontrol ederseniz, hepsi iyi. Bir ng-show yapsaydım, hata hala devam ederdi.

Ng-if ve ng-show hakkında dikkat edilmesi gereken önemli bir nokta da form kontrollerini kullanırken ng-ifelemanın dom'tan tamamen kaldırılması nedeniyle daha iyi olmasıdır.

Bu fark önemlidir, çünkü ile bir giriş alanı oluşturup required="true"sonra ng-show="false"gizlemeyi ayarladıysanız , kullanıcı formu göndermeye çalıştığında Chrome aşağıdaki hatayı atar:

An invalid form control with name='' is not focusable.

Giriş alanı olmasının nedeni var ve requiredgizlidir , ancak gizli olduğu için Chrome buna odaklanamaz. Bu, komut dosyasının yürütülmesini durdurduğundan tam olarak kodunuzu kırabilir. Yani dikkatli ol!

@Gajus Kuizinas ve @CodeHater doğrudur. Burada sadece bir örnek veriyorum. Ng-if ile çalışırken, atanan değer false olursa, tüm html öğeleri DOM'dan kaldırılır. ve atanan değer true olursa, html öğeleri DOM'da görünür olur. Ve kapsam, ana kapsamla karşılaştırıldığında farklı olacaktır. Ancak ng-show durumunda, sadece atanan değere göre elemanları gösterecek ve gizleyecektir. Ancak her zaman DOM'da kalır. Yalnızca görünürlük, atanan değere göre değişir.

http://plnkr.co/edit/3G0V9ivUzzc8kpLb1OQn?p=preview

Umarım bu örnek kapsamları anlamanıza yardımcı olur. Ng-show ve ng-if için yanlış değerler vermeyi deneyin ve konsoldaki DOM'yi kontrol edin. Giriş kutularına değerleri girmeyi deneyin ve farkı gözlemleyin.

<!DOCTYPE html>

Merhaba Plunker!

<input type="text" ng-model="data">
<div ng-show="true">
    <br/>ng-show=true :: <br/><input type="text" ng-model="data">
</div>
<div ng-if="true">
    <br/>ng-if=true :: <br/><input type="text" ng-model="data">
</div> 
{{data}}

Aslında, bu ng-ifdirektif, aksine ng-show, kendi kapsamını yaratır, ilginç pratik farklara yol açar:

angular.module('app', []).controller('ctrl', function($scope){
  $scope.delete = function(array, item){
    array.splice(array.indexOf(item), 1);
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app='app' ng-controller='ctrl'>
   <h4>ng-if:</h4>
   <ul ng-init='arr1 = [1,2,3]'>
      <li ng-repeat='x in arr1'>
        {{show}}
        <button ng-if='!show' ng-click='show=!show'>Delete {{show}}</button>
        <button ng-if='show' ng-click='delete(arr1, x)'>Yes {{show}}</button>
        <button ng-if='show' ng-click='show=!show'>No</button>
      </li>
   </ul>
   
   <h4>ng-show:</h4>
   <ul ng-init='arr2 = [1,2,3]'>
      <li ng-repeat='x in arr2'>
        {{show}}
        <button ng-show='!show' ng-click='show=!show'>Delete {{show}}</button>
        <button ng-show='show' ng-click='delete(arr2, x)'>Yes {{show}}</button>
        <button ng-show='show' ng-click='show=!show'>No</button>
      </li>
   </ul>
   
   <h4>ng-if with $parent:</h4>
    <ul ng-init='arr3 = [1,2,3]'>
      <li ng-repeat='item in arr3'>
        {{show}}
        <button ng-if='!show' ng-click='$parent.show=!$parent.show'>Delete {{$parent.show}}</button>
        <button ng-if='show' ng-click='delete(arr3, x)'>Yes {{$parent.show}}</button>
        <button ng-if='show' ng-click='$parent.show=!$parent.show'>No</button>
      </li>
   </ul>
</div>

İlk listede, on-clickolay /show değişken, iç / kendi kapsamından değiştirilir, ancak dış addan aynı ada sahip ng-ifbaşka bir değişkeni izler , bu nedenle çözüm işe yaramaz. Durumunda anda sadece bir tane var Çalışır neden değişkeni, olmasıdır. İlk denemeyi düzeltmek için , üst / dış kapsamdan aracılığıyla başvurmalıyız .ng-showshowshow$parent.show

1. ng-if false ise, öğeleri DOM'dan kaldırır. Bu, bu öğelere eklenen tüm etkinliklerinizin, direktiflerinizin kaybolacağı anlamına gelir. Örneğin, alt öğelerin birine ng-tıklama, ng-if yanlış olarak değerlendirildiğinde, bu öğe DOM'dan kaldırılır ve yeniden doğru olduğunda yeniden öğe yeniden oluşturulur.

2. ng-show / ng-hide, öğeleri DOM'dan kaldırmaz. Öğeleri gizlemek / göstermek için CSS stillerini (.ng-hide) kullanır. Bu şekilde, etkinliklerinize, çocuklara eklenen direktifler kaybolmaz.

3. ng-if / show-ng-hide yapmazken ng-if bir alt kapsam oluşturur.

ng-show ve ng-hide ters yönde çalışmaktadır. Ancak ng-hide veya ng-show ile ng-if arasındaki fark, eğer ng-if kullanırsak dom'da öğe oluşturulacak, ancak ng-hide / ng-show öğesi ile tamamen gizlenecektir.

ng-show=true/ng-hide=false:
Element will be displayed

ng-show=false/ng-hide=true:
element will be hidden

ng-if =true
element will be created

ng-if= false
element will be created in the dom. 

Unutmayın, şimdi başıma gelen bir şey var: ng-show içeriği css ile gizliyor, evet, ama div düğmelerinde olması gereken tuhaf hatalarla sonuçlandı.

Altta iki düğmeli bir kartım vardı ve gerçek duruma bağlı olarak bir üçüncü giriş, yeni giriş ile örnek düzenleme düğmesi ile değiştirilir. Sol olanı gizlemek için ng-show = false kullanılması (dosyada ilk sırada bulunur), aşağıdaki düğmenin kartın dışında sağ kenarlıkla sona erdiği ortaya çıktı. ng-if, kodu hiç dahil etmeyerek düzeltir. (Ng-show yerine ng-if kullanarak bazı gizli sürprizler olup olmadığını kontrol edin)

ngIf , öğeyi kaldırarak veya yeniden oluşturarak DOM üzerinde bir değişiklik yapar.

Oysa ngShow bir şeyi gizlemek / göstermek için bir css kuralları uygular.

Çoğu durumda (her zaman değil) , bunu, şeyleri göstermek / gizlemek için bir kerelik kontrole ng-ifihtiyacınız varsa, ekrandaki kullanıcı işlemlerine göre bir şeyleri göstermeniz / gizlemeniz gerekirse kullanın ( bir onay kutusu daha sonra metin kutusunu göster, işaretlenmemiş ve ardından metin kutusunu gizle vb.), ardındanng-show

Ng-if ve ng-show'daki ilginç bir fark:

GÜVENLİK

Ng-if bloğunda bulunan DOM öğeleri, değerinin yanlış olması durumunda oluşturulmayacaktır

burada ng-show durumunda olduğu gibi, kullanıcı Elemanları Denetle Pencerenizi açabilir ve değerini TRUE olarak ayarlayabilir.

Ve bir boğmaca ile, gizlenmesi gereken tüm içerik görüntülenir, bu bir güvenlik ihlalidir. :)