Saya baru mulai dengan angularjs, dan saya sedang berusaha mengubah beberapa plugin JQuery lama menjadi arahan Angular. Saya ingin menetapkan sekumpulan opsi default untuk direktif (elemen) saya, yang dapat diganti dengan menentukan nilai opsi dalam atribut.
Saya telah melihat-lihat cara orang lain melakukan ini, dan di perpustakaan angular-ui ui.bootstrap.pagination tampaknya melakukan hal serupa.
Pertama, semua opsi default didefinisikan dalam objek konstan:
.constant('paginationConfig', {
itemsPerPage: 10,
boundaryLinks: false,
...
})
Kemudian getAttributeValue
fungsi utilitas dilampirkan ke pengontrol direktif:
this.getAttributeValue = function(attribute, defaultValue, interpolate) {
return (angular.isDefined(attribute) ?
(interpolate ? $interpolate(attribute)($scope.$parent) :
$scope.$parent.$eval(attribute)) : defaultValue);
};
Akhirnya, ini digunakan dalam fungsi penautan untuk membaca atribut sebagai
.directive('pagination', ['$parse', 'paginationConfig', function($parse, config) {
...
controller: 'PaginationController',
link: function(scope, element, attrs, paginationCtrl) {
var boundaryLinks = paginationCtrl.getAttributeValue(attrs.boundaryLinks, config.boundaryLinks);
var firstText = paginationCtrl.getAttributeValue(attrs.firstText, config.firstText, true);
...
}
});
Ini sepertinya pengaturan yang agak rumit untuk sesuatu yang standar seperti ingin mengganti satu set nilai default. Apakah ada cara lain untuk melakukan ini yang umum? Atau apakah normal untuk selalu mendefinisikan fungsi utilitas seperti getAttributeValue
dan mengurai pilihan dengan cara ini? Saya tertarik untuk mengetahui strategi berbeda yang dimiliki orang untuk tugas bersama ini.
Juga, sebagai bonus, saya tidak jelas mengapa interpolate
parameter diperlukan.
sumber
ui.bootstrap.pagination
hal-hal dengan cara yang lebih rumit? Berpikir bahwa jika menggunakan fungsi kompilasi perubahan atribut apa pun yang dibuat nanti tidak akan tercermin, tetapi ini tampaknya tidak benar karena hanya default yang ditetapkan pada tahap ini. Kira harus ada tradeoff yang dilakukan di sini.compile
Anda tidak dapat membaca atribut, yang harus diinterpolasi untuk mendapatkan nilai (yang berisi ekspresi). Tetapi jika Anda ingin memeriksa hanya jika atribut kosong - itu akan berfungsi tanpa pengorbanan untuk Anda (sebelum atribut interpolasi akan berisi string dengan ekspresi).ui.bootstrap.pagination
contoh saya menemukan contoh yang sangat berguna ini: jsfiddle.net/EGfgHlink
opsi, Anda masih dapat mengembalikan fungsi dicompile
opsi Anda . doc di siniattributes.foo = '["one", "two", "three"]'
bukanattributes.foo = ["one", "two", "three"]
Gunakan
=?
bendera untuk properti di blok lingkup direktif.sumber
=?
tersedia sejak 1.1.xtrue
ataufalse
sebagai nilai, Anda akan (saya pikir) ingin menggunakan mis$scope.hasName = angular.isDefined($scope.hasName) ? $scope.hasName : false;
.=?
, tetapi tidak dengan pengikatan satu arah@?
,.link
fungsi? Berdasarkan pemahaman saya, menugaskan selamalink
harus menghindari$scope.$apply()
siklus, bukan?Saya menggunakan AngularJS v1.5.10 dan menemukan
preLink
fungsi kompilasi bekerja dengan baik untuk menetapkan nilai atribut default.Hanya pengingat:
attrs
memegang nilai atribut DOM mentah yang selalu berupaundefined
string.scope
memegang (antara lain) nilai-nilai atribut DOM diurai sesuai dengan spesifikasi lingkup isolat yang disediakan (=
/<
/@
/ dll.).Cuplikan ringkas:
sumber