Komunikasi antara arahan bersarang

61

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 innerdirektif dapat memerlukan outerdirektif, yang dapat mengekspos beberapa metode pada controller-nya. Jadi dalam innerdefinisi

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 outerpengontrol direktif:

controller: function($scope) {
   this.chosen = function(something) {
   }
}

$emit peristiwa

The innerdirektif bisa $emitsebuah acara, yang outerdirektif dapat merespon, melalui $on. Jadi dalam innerpengontrol direktif:

controller: function($scope) {
  $scope.chosen = function() {
    $scope.$emit('inner::chosen', something);
  }
}

dan di outerpengontrol 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 innercontroller 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 outerruang 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 innerarahan:

// scope: anything but a hash {}
controller: function() {
  $scope.click = function() {
    $scope.functionOnOuter(something);
  }
}

Dan dalam outerarahan:

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?

Michal Charemza
sumber
5
Saya tidak percaya saya belum melihat pertanyaan ini sebelumnya. Saya menghargai semua opsi yang Anda berikan. Jika Anda belum melakukannya, pernahkah Anda memikirkan untuk memposting pertanyaan ini di stackoverflow? Saya berharap bahwa itu akan mendapatkan traksi lebih banyak di stackoverflow.
Mike Barlow - BarDev
Silakan lihat proposal ini - softwareengineering.stackexchange.com/questions/344165/…
yellowblood

Jawaban:

7

Preferensi saya adalah mendefinisikan &atribut dalam lingkup direktif terutama karena saya melihat scope: {}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 $emitacara, fungsi-fungsi lingkup yang diwarisi atau fungsi-fungsi yang digunakan dalam pengontrol yang disuntikkan.

Jeff Swensen
sumber
1

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.

RobbyD
sumber