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/