Saya mencoba memahami perbedaan antara ng-if
dan ng-show
/ ng-hide
, tetapi mereka terlihat sama bagi saya.
Apakah ada perbedaan yang harus saya ingat memilih untuk menggunakan satu atau yang lain?
sumber
Saya mencoba memahami perbedaan antara ng-if
dan ng-show
/ ng-hide
, tetapi mereka terlihat sama bagi saya.
Apakah ada perbedaan yang harus saya ingat memilih untuk menggunakan satu atau yang lain?
The ngIf
direktif Menghapus atau recreates sebagian dari pohon DOM berdasarkan ekspresi. Jika ekspresi yang ditetapkan untuk ngIf
mengevaluasi nilai palsu maka elemen tersebut dihapus dari DOM, jika tidak, klon elemen dimasukkan kembali ke dalam DOM.
<!-- 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>
Ketika elemen dihapus menggunakan ngIf
cakupannya dihancurkan dan cakupan baru dibuat ketika elemen dikembalikan. Lingkup yang dibuat di dalam ngIf
mewarisi dari lingkup induknya menggunakan pewarisan prototypal.
Jika ngModel
digunakan di dalam ngIf
untuk mengikat JavaScript primitif yang didefinisikan dalam lingkup induk, setiap modifikasi yang dilakukan pada variabel dalam lingkup anak tidak akan mempengaruhi nilai dalam lingkup induk, misalnya
<input type="text" ng-model="data">
<div ng-if="true">
<input type="text" ng-model="data">
</div>
Untuk menyiasati situasi ini dan memperbarui model dalam lingkup induk dari dalam lingkup anak, gunakan objek:
<input type="text" ng-model="data.input">
<div ng-if="true">
<input type="text" ng-model="data.input">
</div>
Atau, $parent
variabel untuk merujuk objek lingkup induk:
<input type="text" ng-model="data">
<div ng-if="true">
<input type="text" ng-model="$parent.data">
</div>
The ngShow
direktif menunjukkan atau menyembunyikan elemen HTML yang diberikan berdasarkan ekspresi yang diberikan kepada ngShow
atribut. Elemen ditampilkan atau disembunyikan dengan menghapus atau menambahkan ng-hide
kelas CSS ke elemen. Kelas .ng-hide
CSS sudah ditentukan sebelumnya dalam AngularJS dan mengatur gaya tampilan ke none (menggunakan !important
bendera).
<!-- 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>
Ketika ngShow
ekspresi mengevaluasi false
maka ng-hide
kelas CSS ditambahkan ke class
atribut pada elemen yang menyebabkannya tersembunyi. Ketika true
, ng-hide
kelas CSS dihapus dari elemen yang menyebabkan elemen tidak muncul tersembunyi.
ng-if
model, ditambahkan olehng-model
, tidak ada lagi.data.input
itu berfungsi ... tetapidata
sendirian dalam model tidak berfungsi. @CodeHaterngIf
membuat ruang lingkup baru, jadi dengan melihat contoh di atas, nestedngModel
akan membuatdata
model baru meskipun model dengan nama yang sama ada di lingkup induk. Tetapi ketika Anda menggunakan notasi titik, Anda membuat JS mencari rantai prototipe ruang lingkup. Jadi jika tidak menemukan nilai dalam cakupan saat ini, ia akan mencoba mencarinya di lingkup induk dan seterusnya. Beberapa arahan lain yang membuat ruang lingkup yang berbedangInclude
,ngRepeat
. Semoga ini jelas sekarang. :)Mungkin hal yang menarik untuk disampaikan, adalah perbedaan antara prioritas di antara keduanya.
Sejauh yang saya tahu, arahan ng-if memiliki salah satu prioritas tertinggi (jika bukan yang tertinggi) dari semua arahan Angular. Yang berarti: itu akan berjalan PERTAMA sebelum semua lainnya, arahan diprioritaskan rendah. Fakta bahwa ia menjalankan PERTAMA, berarti bahwa secara efektif, elemen dihapus sebelum arahan dalam diproses. Atau setidaknya: itulah yang saya lakukan.
Saya mengamati dan menggunakan ini di UI saya sedang membangun untuk pelanggan saya saat ini. Seluruh UI cukup padat, dan memiliki ng-show dan ng-hide di atasnya. Tidak terlalu detail, tapi saya membangun komponen generik, yang bisa dikelola menggunakan konfigurasi JSON, jadi saya harus melakukan beberapa pergantian di dalam templat. Ada hadiah ng-repeat, dan di dalam ng-repeat, sebuah tabel ditampilkan, yang memiliki banyak pertunjukan, ng-jangat dan bahkan ng-switch hadir. Mereka ingin menunjukkan setidaknya 50 pengulangan dalam daftar, yang akan menghasilkan kurang lebih 1500-2000 arahan yang harus diselesaikan. Saya memeriksa kode, dan Java backend + custom JS di bagian depan akan memakan waktu sekitar 150ms untuk memproses data, dan kemudian Angular akan mengunyah sekitar 2-3 detik di atasnya, sebelum menampilkan. Pelanggan tidak mengeluh, tapi saya terkejut :-)
Dalam pencarian saya, saya menemukan petunjuk ng-if. Sekarang, mungkin yang terbaik untuk menunjukkan bahwa pada saat menyusun UI ini, tidak ada ng-jika tersedia. Karena ng-show dan ng-hide memiliki fungsi di dalamnya, yang mengembalikan booleans, saya dapat dengan mudah menggantinya dengan ng-if. Dengan melakukan itu, semua arahan batin tampaknya tidak lagi dievaluasi. Itu berarti saya kembali ke sekitar sepertiga dari semua arahan yang sedang dievaluasi, dan dengan demikian, UI mempercepat hingga sekitar 500ms - 1 detik waktu pemuatan. (Saya tidak punya cara untuk menentukan detik yang tepat)
Perhatikan: fakta bahwa arahan tidak dievaluasi, adalah tebakan yang berpendidikan tentang apa yang terjadi di bawahnya.
Jadi, menurut saya: jika Anda membutuhkan elemen untuk hadir di halaman (yaitu: untuk memeriksa elemen, atau apa pun), tetapi hanya disembunyikan, gunakan ng-show / ng-hide. Dalam semua kasus lain, gunakan ng-jika.
sumber
The
ng-if
direktif menghapus konten dari halaman danng-show/ng-hide
menggunakan CSSdisplay
properti untuk konten hide.Ini berguna jika Anda ingin menggunakan
:first-child
dan:last-child
menyeleksi pseudo ke style.sumber
:first-child
dan:last-child
developer.mozilla.org/en-US/docs/Web/CSS/:first-child developer.mozilla.org/en-US/docs/Web/CSS/:last-child@EdSpencer sudah benar. Jika Anda memiliki banyak elemen dan Anda menggunakan ng-jika hanya instantiate yang relevan, Anda menghemat sumber daya. @ Codode juga agak benar, jika Anda akan menghapus dan menunjukkan elemen sangat sering, menyembunyikannya alih-alih menghapusnya dapat meningkatkan kinerja.
Kasus penggunaan utama yang saya temukan untuk ng-if adalah memungkinkan saya untuk memvalidasi dan menghilangkan elemen secara bersih jika kontennya ilegal. Misalnya saya bisa merujuk ke variabel nama gambar nol dan itu akan menimbulkan kesalahan tetapi jika saya ng-jika dan memeriksa apakah itu nol, semuanya baik-baik saja. Jika saya melakukan pertunjukan ng, kesalahan masih akan menyala.
sumber
Satu hal penting yang perlu diperhatikan tentang ng-if dan ng-show adalah bahwa ketika menggunakan kontrol formulir lebih baik digunakan
ng-if
karena itu benar-benar menghilangkan elemen dari dom.Perbedaan ini penting karena jika Anda membuat bidang input dengan
required="true"
dan kemudian mengaturng-show="false"
untuk menyembunyikannya, Chrome akan melempar kesalahan berikut ketika pengguna mencoba mengirimkan formulir:Alasannya adalah bidang input ada dan itu ada
required
tetapi karena tersembunyi Chrome tidak bisa fokus padanya. Ini benar-benar dapat memecahkan kode Anda karena kesalahan ini menghentikan eksekusi skrip. Jadi hati-hati!sumber
@Gajus Kuizinas dan @CodeHater benar. Di sini saya hanya memberi contoh. Sementara kami bekerja dengan ng-if, jika nilai yang diberikan salah maka seluruh elemen html akan dihapus dari DOM. dan jika nilai yang diberikan benar, maka elemen html akan terlihat pada DOM. Dan cakupannya akan berbeda dibandingkan dengan cakupan induknya. Tetapi dalam kasus ng-show, itu hanya akan menunjukkan dan menyembunyikan elemen-elemen berdasarkan nilai yang diberikan. Tapi selalu tetap di DOM. Hanya visibilitas yang berubah sesuai nilai yang ditetapkan.
http://plnkr.co/edit/3G0V9ivUzzc8kpLb1OQn?p=preview
Semoga contoh ini akan membantu Anda dalam memahami ruang lingkup. Coba berikan nilai-nilai salah untuk ng-show dan ng-if dan periksa DOM di konsol. Coba masukkan nilai dalam kotak input dan amati perbedaannya.
Hello Plunker!
sumber
Fakta,
ng-if
arahan itu, tidak seperting-show
, menciptakan ruang lingkupnya sendiri, mengarah pada perbedaan praktis yang menarik:Pada daftar pertama,
on-click
event,show
variabel, dari bawaan / lingkup sendiri , diubah, tetaping-if
menonton pada variabel lain dari luar lingkup dengan nama yang sama, sehingga solusi tidak berfungsi. Jikang-show
kita memiliki satu-satunyashow
variabel, itu sebabnya ia bekerja. Untuk memperbaiki upaya pertama, kita harus merujukshow
dari induk / luar lingkup via$parent.show
.sumber
ng-jika if false akan menghapus elemen dari DOM. Ini berarti bahwa semua acara Anda, arahan yang melekat pada elemen-elemen itu akan hilang. Misalnya, ng-klik ke salah satu elemen anak, ketika ng-jika bernilai false, elemen itu akan dihapus dari DOM dan lagi ketika benar itu dibuat ulang.
ng-show / ng-hide tidak menghapus elemen dari DOM. Menggunakan gaya CSS (.ng-hide) untuk menyembunyikan / menampilkan elemen. Dengan cara ini acara Anda, arahan yang melekat pada anak-anak tidak akan hilang.
ng-if membuat lingkup anak sementara ng-show / ng-hide tidak.
sumber
ng-show dan ng-hide bekerja dengan cara yang berlawanan. Tetapi perbedaan antara ng-hide atau ng-show dengan ng-if adalah, jika kita menggunakan ng-if maka elemen akan dibuat di dom tetapi dengan elemen ng-hide / ng-show akan disembunyikan sepenuhnya.
sumber
Untuk diketahui, hal yang terjadi pada saya sekarang: ng-show memang menyembunyikan konten melalui css, ya, tapi itu menghasilkan gangguan aneh di div yang seharusnya berupa tombol.
Saya memiliki kartu dengan dua tombol di bagian bawah dan tergantung pada keadaan sebenarnya, salah satunya ditukar dengan yang ketiga, misalnya tombol edit dengan entri baru. Menggunakan ng-show = false untuk menyembunyikan yang kiri (ada lebih dulu di dalam file) itu terjadi bahwa tombol berikut berakhir dengan perbatasan kanan di luar kartu. ng-jika memperbaikinya dengan tidak memasukkan kode sama sekali. (Cukup periksa di sini jika ada beberapa kejutan tersembunyi menggunakan ng-jika alih-alih ng-show)
sumber
ngIf membuat manipulasi pada DOM dengan menghapus atau membuat ulang elemen.
Sedangkan ngShow menerapkan aturan css untuk menyembunyikan / menampilkan sesuatu.
Untuk sebagian besar kasus (tidak selalu) , saya akan meringkas ini sebagai, jika Anda memerlukan pemeriksaan satu kali untuk menampilkan / menyembunyikan sesuatu, gunakan
ng-if
, jika Anda perlu menampilkan / menyembunyikan sesuatu berdasarkan tindakan pengguna di layar (seperti dicentang kotak centang kemudian tampilkan kotak teks, hapus centang lalu sembunyikan kotak teks dll.), lalu gunakanng-show
sumber
Satu perbedaan menarik dalam ng-if dan ng-show adalah:
KEAMANAN
Elemen DOM yang ada di blok ng-if tidak akan diberikan jika nilainya salah
dimana dalam hal ng-show, pengguna dapat membuka Jendela Elemen Inspeksi Anda dan mengatur nilainya ke TRUE.
Dan dengan teriakan, seluruh konten yang dimaksudkan untuk disembunyikan akan ditampilkan, yang merupakan pelanggaran keamanan. :)
sumber