Saya ingin tahu apakah ada cara untuk mengganti template tunggal dan spesifik dari file ui-bootstrap-tpls. Sebagian besar template default sesuai dengan kebutuhan saya, tetapi ada beberapa template khusus yang ingin saya ganti tanpa melalui seluruh proses untuk mengambil semua template default dan menghubungkannya ke versi non-tpls.
angularjs
angular-ui
angular-ui-bootstrap
Jeremy Privett
sumber
sumber
$modallayanan untuk mendapatkan lebih banyak konfigurasi tanpa (semoga) membuat terlalu banyak sakit kepala pemeliharaan.$provide.decorator('$modal'... Dalam kasus saya, saya tidak ingin membuatmodalWindowelemen. Pernah. Saya hanya tidak menggunakannya, dan ini adalah yang terbaik yang bisa saya dapatkan. Saya ingin mendengar cara yang lebih baik jika ada yang memilikinya.Jawaban:
Ya, arahan dari http://angular-ui.github.io/bootstrap sangat dapat disesuaikan dan mudah untuk mengganti salah satu templat (dan masih bergantung pada templat default untuk arahan lain).
Itu cukup untuk memberi makan
$templateCache, baik mengumpankannya secara langsung (seperti yang dilakukan dalamui-bootstrap-tplsfile) atau - mungkin lebih sederhana - menimpa templat menggunakan<script>direktif ( doc ).Sebuah contoh buat di mana saya mengganti template peringatan untuk pertukaran
xuntukCloseditunjukkan di bawah ini:<!doctype html> <html ng-app="plunker"> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script> <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.4.0.js"></script> <script src="example.js"></script> <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"> <script id="template/alert/alert.html" type="text/ng-template"> <div class='alert' ng-class='type && "alert-" + type'> <button ng-show='closeable' type='button' class='close' ng-click='close()'>Close</button> <div ng-transclude></div> </div> </script> </head> <body> <div ng-controller="AlertDemoCtrl"> <alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)"> {{alert.msg}} </alert> <button class='btn' ng-click="addAlert()">Add Alert</button> </div> </body> </html>Plunker langsung: http://plnkr.co/edit/gyjVMBxa3fToYTFJtnij?p=preview
sumber
Menggunakan
$provide.decoratorMenggunakan
$provideuntuk menghias arahan menghindari kebutuhan untuk langsung dipusingkan$templateCache.Alih-alih, buat html template eksternal Anda seperti biasa, dengan nama apa pun yang Anda suka, lalu timpa petunjuk
templateUrluntuk menunjuknya.angular.module('plunker', ['ui.bootstrap']) .config(['$provide', Decorate]); function Decorate($provide) { $provide.decorator('alertDirective', function($delegate) { var directive = $delegate[0]; directive.templateUrl = "alertOverride.tpl.html"; return $delegate; }); }Garpu dari plunkr pkozlowski.opensource: http://plnkr.co/edit/RE9AvUwEmKmAzem9mfpI?p=preview
(Perhatikan bahwa Anda harus menambahkan akhiran 'Directive' ke nama direktif yang ingin Anda hiasi. Di atas, kami mendekorasi
alertdirektif UI Bootstrap , jadi kami menggunakan namanyaalertDirective.)Karena Anda mungkin sering ingin melakukan lebih dari sekadar menimpa
templateUrl, ini memberikan titik awal yang baik untuk memperluas direktif lebih lanjut, misalnya dengan menimpa / membungkus tautan atau fungsi kompilasi ( misalnya ).sumber
alertDirectiveitu kata kunci? jika ya, untuk apa kata kuncinyaTabs? Saya mencoba melakukan hal serupa pada tab, tetapi saya melihat melalui alert.js, dan saya tidak melihat di mana merekaalertDirectiveada di sana.$compileProvidermelampirkan sufiks 'Directive' ke nama direktif Anda saat Anda mendaftarkannya ($filterProvidermelakukan serupa dengan sufiks 'Filter'); untuk sebagian besar tujuan ini tidak terlihat, tetapi saat mendekorasi Anda harus menambahkan sufiks ini ke petunjuk yang ingin Anda targetkan. Misalnya,tabDirectiveatautabsetDirective, dll. Tidak didokumentasikan dengan jelas di mana pun yang dapat saya temukan, tetapi berikut ini referensi untuk perilaku serupa$filterProvidersetidaknya: docs.angularjs.org/api/ng/provider/$filterProviderfunction(element, attributes)ke templateUrl. Anda dapat menggunakan ini untuk beberapa perilaku dinamis (kembalikan fungsi templateUrl asli atau string url Anda sendiri bergantung pada atribut, dll). Namun, ui.bootstrap sekarang juga menggunakan fungsionalitas yang sama ini untuk memungkinkan Anda memberikantemplate-urlatribut pada direktif, jadi Anda juga dapat menggunakannya jika Anda senang untuk menyediakan jalur templat secara langsung melalui atribut elemen direktif.Jawaban dari pkozlowski.opensource sangat berguna dan banyak membantu saya! Saya men-tweaknya dalam kondisi saya untuk memiliki satu file yang mendefinisikan semua template sudut saya menimpa dan memuat JS eksternal untuk menjaga ukuran payload tetap rendah.
Untuk melakukan ini, pergi ke bagian bawah file js sumber ui-bootstrap sudut (misalnya
ui-bootstrap-tpls-0.6.0.js) dan temukan template yang Anda minati. Salin seluruh blok yang mendefinisikan template dan tempelkan ke file JS pengganti Anda.misalnya
angular.module("template/alert/alert.html", []).run(["$templateCache", function($templateCache) { $templateCache.put("template/alert/alert.html", " <div class='alert' ng-class='type && \"alert-\" + type'>\n" + " <button ng-show='closeable' type='button' class='close' ng-click='close()'>Close</button>\n" + " <div ng-transclude></div>\n" + " </div>"); }]);Kemudian masukkan saja file overrides Anda setelah ui-bootstrap dan Anda akan mendapatkan hasil yang sama.
Versi bercabang dari pkozlowski.opensource 's memetik http://plnkr.co/edit/iF5xw2YTrQ0IAalAYiAg?p=preview
sumber
Anda dapat menggunakan
template-url="/app/.../_something.template.html"untuk mengganti template saat ini untuk direktif tersebut.(Bekerja di Accordion Bootstrap setidaknya.)
sumber