AngularJS: ngInclude vs direktif

93

Saya tidak begitu mengerti kapan harus menggunakan direktif dan kapan lebih tepat menggunakan nginclude. Ambil contoh ini: Saya memiliki sebagian password-and-confirm-input-fields.html,, itu adalah html untuk memasukkan dan mengonfirmasi kata sandi. Saya menggunakan ini baik di bawah halaman pendaftaran dan di bawah halaman ubah sandi. Kedua halaman tersebut masing-masing memiliki pengontrol, sebagian html tidak memiliki pengontrol khusus.

Haruskah saya menggunakan direktif atau ngIncludeuntuk ini?

EricC
sumber
Saya akan mengikuti arahan setiap saat, tetapi saya ingin tahu apa yang akan dikatakan orang Angular yang lebih berpengalaman.
Austin Mullins
1
Jika itu benar-benar merupakan komponen independen, itu mungkin harus memiliki pengontrolnya sendiri yang terkait dengannya. IMO, saya akan menggunakan sebagian - tetapi, saya ingin tahu lebih banyak masukan
tymeJV
4
Jika ada kode js yang diperlukan untuk parsial itu, gunakan direktif. Jika hanya HTML, gunakan ngInclude.
Daniel Beck

Jawaban:

122

Itu semua tergantung pada apa yang Anda inginkan dari fragmen kode Anda. Secara pribadi, jika kode tidak memiliki logika apa pun, atau bahkan tidak memerlukan pengontrol, maka saya akan menggunakannya ngInclude. Saya biasanya meletakkan lebih banyak fragmen html "statis" yang tidak ingin mengacaukan tampilan di sini. (Misal: Katakanlah sebuah tabel besar yang datanya berasal dari Pengontrol induk. Ini lebih bersih untuk dimiliki <div ng-include="bigtable.html" />daripada semua baris yang mengacaukan Tampilan)

Jika ada logika, manipulasi DOM, atau Anda membutuhkannya untuk dapat disesuaikan (alias dirender secara berbeda) dalam berbagai contoh yang digunakan, maka directivesadalah pilihan yang lebih baik (awalnya menakutkan, tetapi sangat kuat, berikan waktu) .

ngInclude

Terkadang Anda akan melihat ngInclude'sbahwa dipengaruhi oleh eksterior $scope/ interface. Seperti repeater besar / rumit katakanlah. 2 antarmuka ini diikat menjadi satu karena ini. Jika sesuatu dalam $scopeperubahan utama , Anda harus mengubah / mengubah logika Anda dalam parsial yang Anda sertakan.

Arahan

Di sisi lain, arahan dapat memiliki cakupan / pengontrol / dll yang eksplisit. Jadi jika Anda memikirkan skenario di mana Anda harus menggunakan kembali sesuatu beberapa kali, Anda dapat melihat bagaimana memiliki cakupannya sendiri yang terhubung akan membuat hidup lebih mudah & lebih sedikit. membingungkan.

Selain itu, kapan pun Anda akan berinteraksi dengan DOM, Anda harus menggunakan arahan. Ini membuatnya lebih baik untuk pengujian, dan memisahkan tindakan ini dari pengontrol / layanan / dll, yang merupakan sesuatu yang Anda inginkan!

Tip: Pastikan untuk tidak menggunakan batasan: 'E' jika Anda peduli dengan IE8! Ada cara untuk mengatasi ini, tetapi mereka menjengkelkan. Buat hidup lebih mudah dan pertahankan dengan atribut / etc.<div my-directive />

Komponen [Pembaruan 3/1/2016]

Ditambahkan di Angular 1.5, ini pada dasarnya adalah pembungkus .directve(). Komponen harus digunakan di sebagian besar waktu. Ini menghapus banyak kode direktif boilerplate, dengan default ke hal-hal seperti restrict: 'E', scope : {}, bindToController: true. Saya sangat merekomendasikan menggunakan ini untuk hampir semua yang ada di aplikasi Anda, agar dapat beralih ke Angular2 dengan lebih mudah.

Kesimpulannya:

Anda harus membuat Komponen & Direktif di sebagian besar waktu.

  • Lebih bisa diperluas
  • Anda dapat membuat template dan memiliki file Anda secara eksternal (seperti ngInclude)
  • Anda dapat memilih untuk menggunakan lingkup induk, atau lingkup isolasinya sendiri dalam direktif.
  • Gunakan kembali dengan lebih baik di seluruh aplikasi Anda


Perbarui 3/1/2016

Sekarang Angular 2 perlahan-lahan selesai, dan kami tahu format umumnya (tentu saja masih akan ada beberapa perubahan di sana-sini) hanya ingin menambahkan betapa pentingnya hal itu untuk dilakukan components(terkadang arahan jika Anda membutuhkannya untuk dibatasi: ' E 'misalnya).

Komponennya sangat mirip dengan Angular 2 @Component. Dengan cara ini kami merangkum logika & html di area yang sama.


Pastikan Anda merangkum sebanyak mungkin hal dalam komponen, ini akan membuat transisi ke Angular 2 jauh lebih mudah! (Jika Anda memilih untuk melakukan transisi)

Berikut adalah artikel bagus yang menjelaskan proses migrasi ini menggunakan directives(sangat mirip jika Anda akan menggunakan komponen tentunya): http://angular-tips.com/blog/2015/09/migrating-directives-to-angular-2/

Mark Pieszak - Trilon.io
sumber
5
Saya setuju dengan jawaban ini. Kurva pembelajaran untuk arahan curam, tetapi itu benar-benar terbayar setelah Anda mendapatkannya.
Jazzy
@mcpDESIGNS, satu kasus yang mungkin tidak cocok dengan jawaban ini dengan sempurna (setidaknya bukan dua paragraf pertama). Jika saya memiliki nav-parsial, dengan pengontrolnya sendiri, dan saya hanya akan menggunakan ini sekali (dalam file index.html), maka ini mungkin harus parsial dan bukan arahan karena hanya digunakan sekali (itu adalah semacam aplikasi terpisah dalam artian tidak disertakan sebagai bagian dari ngview), meskipun memiliki logikanya sendiri. Atau?
EricC
Ini masih membingungkan .. Anda juga dapat menentukan pengontrol saat menggunakan ngInclude, lihat ini: stackoverflow.com/questions/13811948/…
Marwen Trabelsi
1
Tentu saja, tetapi selalu terhubung sepenuhnya ke pengontrol induk dalam beberapa cara. Dimana direktif dapat membuat pengontrol di dalam dirinya sendiri ketika template dimuat. Ini dapat sepenuhnya terpisah (jika Anda mau)
Mark Pieszak - Trilon.io
1
Hal terbaik yang dapat Anda lakukan adalah mengabstraksikan konsep ini menjadi pabrik atau sesuatu, dengan cara itu Anda dapat memanggilnya dari dalam suatu linkfungsi dan voila! Akan lebih baik jika dimasukkan ke dalam arahan, tanpa keraguan :( @Arwin
Mark Pieszak - Trilon.io