Saya ingin membuat sedikit modifikasi pada arahan pihak ke-3 (khususnya Angular UI Bootstrap ). Saya hanya ingin menambahkan ruang lingkup pane
direktif:
angular.module('ui.bootstrap.tabs', [])
.controller('TabsController', ['$scope', '$element', function($scope, $element) {
// various methods
}])
.directive('tabs', function() {
return {
// etc...
};
})
.directive('pane', ['$parse', function($parse) {
return {
require: '^tabs',
restrict: 'EA',
transclude: true,
scope:{
heading:'@',
disabled:'@' // <- ADDED SCOPE PROPERTY HERE
},
link: function(scope, element, attrs, tabsCtrl) {
// link function
},
templateUrl: 'template/tabs/pane.html',
replace: true
};
}]);
Tetapi saya juga ingin tetap memperbarui Angular-Bootstrap dengan Bower. Segera setelah saya lari bower update
, saya akan menimpa perubahan saya.
Jadi bagaimana cara memperluas arahan ini secara terpisah dari komponen bower ini?
$provide.decorator()
, lihat jawaban saya di bawah.Jawaban:
Mungkin cara termudah untuk menyelesaikannya adalah dengan membuat perintah di aplikasi Anda dengan nama yang sama dengan perintah pihak ketiga. Kedua arahan akan berjalan dan Anda dapat menentukan urutan prosesnya menggunakan
priority
properti (prioritas yang lebih tinggi dijalankan terlebih dahulu).Kedua arahan tersebut akan berbagi ruang lingkup dan Anda dapat mengakses dan mengubah ruang lingkup arahan pihak ketiga melalui
link
metode arahan Anda .Opsi 2: Anda juga dapat mengakses cakupan direktif pihak ketiga hanya dengan meletakkan direktif Anda sendiri yang diberi nama secara sewenang-wenang pada elemen yang sama dengannya (dengan asumsi tidak ada direktif yang menggunakan cakupan isolate). Semua arahan cakupan non-isolasi pada suatu elemen akan berbagi cakupan.
Bacaan Lebih Lanjut: https://github.com/angular/angular.js/wiki/Dev-Guide%3A-Understanding-Directives
Catatan: Jawaban saya sebelumnya adalah untuk memodifikasi layanan pihak ketiga, bukan arahan.
sumber
$compile
dokumen di siniTL; DR - gimme tha demo!
Big Demo Button
Gunakan
$provide
'sdecorator()
, baik, menghias direktif pihak ketiga.Dalam kasus kami, kami dapat memperluas cakupan direktif seperti ini:
Pertama, kami meminta untuk menghias
pane
direktif dengan meneruskan namanya, digabungkan denganDirective
sebagai argumen pertama, lalu kami mengambilnya dari parameter callback (yang merupakan larik perintah yang cocok dengan nama itu).Begitu kita mendapatkannya, kita bisa mendapatkan objek scope dan memperluasnya sesuai kebutuhan. Perhatikan bahwa semua ini harus dilakukan di
config
blok.Beberapa catatan
Disarankan untuk menambahkan arahan dengan nama yang sama, lalu mengatur tingkat prioritasnya. Selain tidak semantik (yang bahkan tidak sepatah kata pun , saya tahu…), ini juga menimbulkan masalah, misalnya bagaimana jika tingkat prioritas arahan pihak ketiga berubah?
JeetendraChauhan telah mengklaim (saya belum mengujinya) bahwa solusi ini tidak akan berfungsi di versi 1.13.
sumber
decorator()
rusak (diperbarui ke docs.angularjs.org/api/auto/service/$provide#decorator )bindToController
diperkenalkan di v1.3. Tetapi perhatikan bahwa ini tidak dapat dianggap sebagai solusi alternatif, ini hanya untuk kasus tertentu di mana arahan asli telah diatur denganbindToController
properti. Ide bagus, saya akan memposting ini sebagai jawaban :)Meskipun ini bukan jawaban langsung untuk pertanyaan Anda, Anda mungkin ingin tahu bahwa versi terbaru (dalam master) dari http://angular-ui.github.io/bootstrap/ menambahkan dukungan untuk menonaktifkan tab. Fitur ini ditambahkan melalui: https://github.com/angular-ui/bootstrap/commit/2b78dd16abd7e09846fa484331b5c35ece6619a2
sumber
Solusi lain di mana Anda membuat arahan baru yang memperluasnya tanpa mengubah arahan asli
Solusinya mirip dengan solusi dekorator:
Buat direktif baru dan masukkan sebagai ketergantungan arahan yang ingin Anda perpanjang
Dengan cara ini Anda dapat menggunakan petunjuk asli dan versi diperpanjang di aplikasi yang sama
sumber
angular.merge
seharusnya sudah digunakan, saya akan memperbarui contohBerikut adalah solusi lain untuk skenario berbeda dalam memperluas pengikatan ke arahan yang memiliki
bindToController
properti.Catatan: ini bukan alternatif untuk solusi lain yang ditawarkan di sini. Ini hanya menyelesaikan kasus tertentu (tidak tercakup dalam jawaban lain) di mana arahan asli dibuat
bindToController
.sumber