Saya mencari cara apa pun untuk mengakses ruang lingkup "induk" dalam arahan. Kombinasi ruang lingkup, transclude, memerlukan, meneruskan variabel (atau cakupan itu sendiri) dari atas, dll. Saya benar-benar ingin membungkuk ke belakang, tetapi saya ingin menghindari sesuatu yang benar-benar hacky atau tidak dapat dipertahankan. Sebagai contoh, saya tahu saya bisa melakukannya sekarang dengan mengambil $scope
dari parameter preLink dan mengulangi $sibling
cakupannya untuk menemukan "induk" konseptual.
Yang benar-benar saya inginkan adalah bisa $watch
berekspresi di lingkup orang tua. Jika saya bisa melakukan itu, maka saya dapat mencapai apa yang saya coba lakukan di sini:
AngularJS - Bagaimana cara membuat sebagian dengan variabel?
Catatan penting adalah bahwa arahan harus dapat digunakan kembali dalam lingkup induk yang sama. Karenanya perilaku default (lingkup: false) tidak berfungsi untuk saya. Saya membutuhkan ruang lingkup individu per instance dari direktif, dan kemudian saya perlu $watch
variabel yang hidup dalam lingkup induk.
Contoh kode bernilai 1000 kata, jadi:
app.directive('watchingMyParentScope', function() {
return {
require: /* ? */,
scope: /* ? */,
transclude: /* ? */,
controller: /* ? */,
compile: function(el,attr,trans) {
// Can I get the $parent from the transclusion function somehow?
return {
pre: function($s, $e, $a, parentControl) {
// Can I get the $parent from the parent controller?
// By setting this.$scope = $scope from within that controller?
// Can I get the $parent from the current $scope?
// Can I pass the $parent scope in as an attribute and define
// it as part of this directive's scope definition?
// What don't I understand about how directives work and
// how their scope is related to their parent?
},
post: function($s, $e, $a, parentControl) {
// Has my situation improved by the time the postLink is called?
}
}
}
};
});
sumber
scope.$watch('localName3', function() { ...[?? WHAT TO DO HERE for example?] });
$parse
dengan=
: biola .$parse
hanya diperlukan dengan cakupan non-isolat.Mengakses metode pengontrol berarti mengakses metode pada lingkup induk dari pengontrol direktif / tautan / cakupan.
Jika arahan berbagi / mewarisi ruang lingkup induk maka cukup mudah untuk hanya memanggil metode lingkup induk.
Dibutuhkan lebih banyak pekerjaan ketika Anda ingin mengakses metode lingkup induk dari lingkup direktif terisolasi.
Ada beberapa opsi (mungkin lebih dari yang tercantum di bawah) untuk memanggil metode lingkup induk dari lingkup arahan terisolasi atau menonton variabel lingkup induk ( opsi # 6 khusus).
Perhatikan bahwa saya menggunakan
link function
contoh-contoh ini tetapi Anda dapat menggunakan adirective controller
juga berdasarkan persyaratan.Pilihan 1. Melalui Objek literal dan dari template html direktif
index.html
itemfilterTemplate.html
app.js
working plnkr: http://plnkr.co/edit/rgKUsYGDo9O3tewL6xgr?p=preview
Pilihan 2. Melalui Object literal dan dari directive link / scope
index.html
itemfilterTemplate.html
app.js
plnkr berfungsi: http://plnkr.co/edit/BRvYm2SpSpBK9uxNIcTa?p=preview
Opsi # 3. Melalui referensi Fungsi dan dari template html direktif
index.html
itemfilterTemplate.html
app.js
working plnkr: http://plnkr.co/edit/Jo6FcYfVXCCg3vH42BIz?p=preview
Opsi # 4. Melalui referensi Fungsi dan dari tautan / lingkup direktif
index.html
itemfilterTemplate.html
app.js
working plnkr: http://plnkr.co/edit/BSqx2J1yCY86IJwAnQF1?p=preview
Opsi # 5: Melalui ng-model dan pengikatan dua arah, Anda dapat memperbarui variabel lingkup induk. . Jadi, Anda mungkin tidak perlu menjalankan fungsi lingkup induk dalam beberapa kasus.
index.html
itemfilterTemplate.html
app.js
plnkr berfungsi: http://plnkr.co/edit/hNui3xgzdTnfcdzljihY?p=preview
Opsi # 6: Melalui
$watch
dan$watchCollection
Ini adalah dua cara mengikatitems
semua contoh di atas, jika item dimodifikasi dalam lingkup induk, item dalam direktif juga akan mencerminkan perubahan.Jika Anda ingin menonton atribut atau objek lain dari lingkup induk, Anda dapat melakukannya menggunakan
$watch
dan$watchCollection
seperti yang diberikan di bawah inihtml
skrip app.js
var app = angular.module ('plunker', []);
Anda selalu dapat merujuk dokumentasi AngularJs untuk penjelasan terperinci tentang arahan.
sumber
dan Anda akan memiliki cakupan yang sama (dengan elemen induk)
Ada banyak cara bagaimana mengakses lingkup induk tergantung pada dua opsi lingkup ini & transclude.
sumber
Berikut adalah trik yang saya gunakan sekali: buat arahan "dummy" untuk memegang ruang lingkup induk dan letakkan di suatu tempat di luar arahan yang diinginkan. Sesuatu seperti:
lalu
Mungkin bukan solusi yang paling anggun, tapi itu menyelesaikan pekerjaan.
sumber
Jika Anda menggunakan Kelas dan
ControllerAs
sintaks ES6 , Anda perlu melakukan sesuatu yang sedikit berbeda.Lihat cuplikan di bawah ini dan perhatikan bahwa itu
vm
adalahControllerAs
nilai Controller induk seperti yang digunakan dalam HTML induksumber
Setelah mencoba semuanya, saya akhirnya menemukan solusi.
Tempatkan saja yang berikut di templat Anda:
{{currentDirective.attr = parentDirective.attr; ''}}
Itu hanya menulis atribut lingkup orangtua / variabel yang ingin Anda akses ke lingkup saat ini.
Juga perhatikan
; ''
pada akhir pernyataan, itu untuk memastikan tidak ada output di template Anda. (Angular mengevaluasi setiap pernyataan, tetapi hanya menampilkan yang terakhir).Agak gila, tapi setelah beberapa jam coba-coba, ini berhasil.
sumber