Saya memiliki versi yang sangat matang dari apa yang saya lakukan yang menyelesaikan masalah.
Saya punya yang sederhana directive
. Setiap kali Anda mengklik suatu elemen, elemen itu menambahkan elemen lainnya. Namun, itu perlu dikompilasi terlebih dahulu untuk membuatnya dengan benar.
Penelitian saya menuntun saya $compile
. Tetapi semua contoh menggunakan struktur rumit yang saya tidak benar-benar tahu cara mendaftar di sini.
Fiddles ada di sini: http://jsfiddle.net/paulocoelho/fBjbP/1/
Dan JS ada di sini:
var module = angular.module('testApp', [])
.directive('test', function () {
return {
restrict: 'E',
template: '<p>{{text}}</p>',
scope: {
text: '@text'
},
link:function(scope,element){
$( element ).click(function(){
// TODO: This does not do what it's supposed to :(
$(this).parent().append("<test text='n'></test>");
});
}
};
});
Solusi oleh Josh David Miller: http://jsfiddle.net/paulocoelho/fBjbP/2/
$compile
? Omong-omong, terima kasih atas jawaban Anda!$compile
layanan adalah apa yang diarahkan oleh kabel dan menghubungkan mereka ke dalam siklus acara. Tidak ada jalan lain$compile
dalam situasi seperti ini, tetapi dalam kebanyakan kasus arahan lain seperti ngRepeat dapat menyelesaikan pekerjaan yang sama (jadi ngRepeat melakukan kompilasi untuk kita). Apakah Anda memiliki kasus penggunaan khusus?Sebagai tambahan untuk menyempurnakan Riceball, LEE menambahkan elemen-direktif baru
Menambahkan atribut-direktif baru ke elemen yang ada dapat dilakukan dengan menggunakan cara ini:
Katakanlah Anda ingin menambahkan on-the-fly
my-directive
kespan
elemen.Semoga itu bisa membantu.
sumber
Maximum call stack size exceeded
Kesalahan selalu terjadi karena rekursi tak terbatas. Saya belum pernah melihat contoh di mana peningkatan ukuran tumpukan akan menyelesaikannya.Secara dinamis menambahkan arahan pada angularjs memiliki dua gaya:
Tambahkan arahan sudut ke arahan lain
memasukkan elemen baru (direktif)
itu mudah. Dan Anda dapat menggunakan "tautan" atau "kompilasi".
menyisipkan atribut baru ke elemen
Sulit, dan membuat saya sakit kepala dalam dua hari.
Menggunakan "$ compile" akan meningkatkan kesalahan rekursif kritis !! Mungkin harus mengabaikan arahan saat ini ketika mengkompilasi ulang elemen.
Jadi, saya harus menemukan cara untuk memanggil fungsi "tautan" direktif. Sangat sulit untuk mendapatkan metode yang berguna yang tersembunyi jauh di dalam penutupan.
Sekarang, ini bekerja dengan baik.
sumber
sumber
Jawaban yang diterima oleh Josh David Miller bekerja sangat baik jika Anda mencoba untuk secara dinamis menambahkan arahan yang menggunakan inline
template
. Namun jika arahan Anda mengambil manfaat daritemplateUrl
jawabannya tidak akan berhasil. Inilah yang bekerja untuk saya:sumber
Josh David Miller benar.
PCoelho, Jika Anda bertanya-tanya apa yang
$compile
ada di balik layar dan bagaimana hasil HTML dihasilkan dari arahan, silakan lihat di bawahThe
$compile
layanan mengkompilasi fragmen dari HTML ("< test text='n' >< / test >"
) yang mencakup direktif ( "test" sebagai unsur) dan menghasilkan fungsi. Fungsi ini kemudian dapat dieksekusi dengan lingkup untuk mendapatkan "HTML output from a directive".Lebih detail dengan contoh kode lengkap di sini: http://www.learn-angularjs-apps-projects.com/AngularJs/dynamically-add-directives-in-angularjs
sumber
Terinspirasi dari banyak jawaban sebelumnya saya telah datang dengan arahan "stroman" berikut yang akan menggantikan dirinya dengan arahan lain.
Penting: Daftarkan arahan yang ingin Anda gunakan
restrict: 'C'
. Seperti ini:Anda bisa menggunakan seperti ini:
Untuk mendapatkan ini:
Protip. Jika Anda tidak ingin menggunakan arahan berdasarkan kelas maka Anda dapat mengubah
'<div></div>'
sesuatu yang Anda sukai. Misalnya memiliki atribut tetap yang berisi nama arahan yang diinginkan, bukanclass
.sumber