Tampaknya ada beberapa cara berkomunikasi antara arahan. Katakanlah Anda memiliki arahan bersarang, di mana arahan dalam harus mengkomunikasikan sesuatu ke luar (misalnya itu telah dipilih oleh pengguna).
<outer>
<inner></inner>
<inner></inner>
</outer>
Sejauh ini saya punya 5 cara untuk melakukan ini
require:
arahan orang tua
The inner
direktif dapat memerlukan outer
direktif, yang dapat mengekspos beberapa metode pada controller-nya. Jadi dalam inner
definisi
require: '^outer',
link: function(scope, iElement, iAttrs, outerController) {
// This can be passed to ng-click in the template
$scope.chosen = function() {
outerController.chosen(something);
}
}
Dan di outer
pengontrol direktif:
controller: function($scope) {
this.chosen = function(something) {
}
}
$emit
peristiwa
The inner
direktif bisa $emit
sebuah acara, yang outer
direktif dapat merespon, melalui $on
. Jadi dalam inner
pengontrol direktif:
controller: function($scope) {
$scope.chosen = function() {
$scope.$emit('inner::chosen', something);
}
}
dan di outer
pengontrol arahan:
controller: function($scope) {
$scope.$on('inner::chosen, function(e, data) {
}
}
Jalankan ekspresi dalam lingkup induk, melalui &
Item dapat mengikat ekspresi dalam lingkup induk, dan menjalankannya pada titik yang sesuai. HTML akan seperti:
<outer>
<inner inner-choose="functionOnOuter(item)"></inner>
<inner inner-choose="functionOnOuter(item)"></inner>
</outer>
Jadi inner
controller memiliki fungsi 'innerChoose' yang bisa dipanggil
scope: {
'innerChoose': '&'
},
controller: function() {
$scope.click = function() {
$scope.innerChoose({item:something});
}
}
yang akan memanggil (dalam hal ini) fungsi 'functionOnOuter' pada outer
ruang lingkup direktif:
controller: function($scope) {
$scope.functionOnOuter = function(item) {
}
}
Lingkup warisan pada lingkup non-terisolasi
Mengingat bahwa ini adalah pengontrol bersarang, pewarisan lingkup dapat digunakan, dan arahan dalam hanya dapat memanggil fungsi apa pun dalam rantai lingkup, asalkan tidak memiliki lingkup yang terisolasi). Jadi dalam inner
arahan:
// scope: anything but a hash {}
controller: function() {
$scope.click = function() {
$scope.functionOnOuter(something);
}
}
Dan dalam outer
arahan:
controller: function($scope) {
$scope.functionOnOuter = function(item) {
}
}
Dengan layanan disuntikkan ke dalam dan luar
Suatu layanan dapat disuntikkan ke dalam kedua arahan, sehingga mereka dapat memiliki akses langsung ke objek yang sama, atau memanggil fungsi untuk memberi tahu layanan, dan mungkin bahkan mendaftarkan diri mereka untuk diberitahukan, dalam sistem pub / sub sistem. Ini tidak membutuhkan arahan untuk disarangkan.
Pertanyaan : Apa saja potensi kelemahan dan kelebihan masing-masing dari yang lain?
sumber
Jawaban:
Preferensi saya adalah mendefinisikan
&
atribut dalam lingkup direktif terutama karena saya melihatscope: {}
definisi direktif sebagai API-nya. Adalah jauh lebih mudah untuk melihat definisi atribut lingkup untuk melihat informasi apa yang direktif perlu berfungsi dengan benar daripada untuk menjelajahi tautan dan fungsi-fungsi pengontrol untuk$emit
acara, fungsi-fungsi lingkup yang diwarisi atau fungsi-fungsi yang digunakan dalam pengontrol yang disuntikkan.sumber
Pendapat saya:
Layanan adalah cara yang disukai untuk berbagi perilaku / data lintas modul / arahan / pengontrol. Arahan adalah hal-hal yang terisolasi yang dapat disarangkan atau tidak. Pengendali harus tetap menjadi model tampilan sebanyak yang mereka bisa, idealnya tidak ada logika bisnis yang berakhir di sana.
Begitu:
Ketika Anda mulai menghubungkan mereka bersama dengan mengakses fungsi lingkup induk, saya pikir Anda berisiko menggabungkannya terlalu keras dan membuat seluruh aplikasi tidak dapat dibaca dan komponen tidak dapat digunakan kembali. Ketika Anda memisahkan data atau perilaku yang dibagikan dalam layanan, Anda memiliki manfaat menggunakan kembali seluruh arahan dengan data / perilaku yang berbeda bahkan menentukan layanan yang akan digunakan saat runtime. Itulah yang dimaksud injeksi ketergantungan.
sumber