Ui-bootstrap-tpls dosyasındaki tek, belirli şablonları geçersiz kılmanın bir yolu olup olmadığını merak ediyorum. Varsayılan şablonların büyük çoğunluğu ihtiyaçlarıma uyuyor, ancak tüm varsayılan şablonları kapma ve onları tpls olmayan sürüme bağlama sürecinden geçmeden değiştirmek istediğim birkaç özel şablon var.
Yanıtlar:
Evet, http://angular-ui.github.io/bootstrap adresindeki yönergeler oldukça özelleştirilebilir ve şablonlardan birini geçersiz kılmak kolaydır (ve yine de diğer yönergeler için varsayılan olanlara güvenmek).
$templateCacheYa doğrudan beslemek ( ui-bootstrap-tplsdosyada yapıldığı gibi ) ya da - muhtemelen daha basit - <script>yönergeyi ( doc ) kullanarak bir şablonu geçersiz kılmak için beslemek yeterlidir .
Uyarının şablonunu değiştirmek xiçin değiştirdiğim uydurma bir örnek Closeaşağıda gösterilmiştir:
<!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>
Canlı plunker: http://plnkr.co/edit/gyjVMBxa3fToYTFJtnij?p=preview
$provide.decorator$provideDirektifi süslemek için kullanmak , doğrudan uğraşma ihtiyacını ortadan kaldırır $templateCache.
Bunun yerine, normalde yaptığınız gibi harici şablon html'nizi istediğiniz adla oluşturun ve ardından yönergeyi göstermesi için yönergeleri geçersiz kılın templateUrl.
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;
});
}
Fork of pkozlowski.opensource 's plunkr: http://plnkr.co/edit/RE9AvUwEmKmAzem9mfpI?p=preview
(Süslemek istediğiniz yönerge adına 'Yönerge' son ekini eklemeniz gerektiğini unutmayın. Yukarıda, UI Bootstrap alertyönergesini süslüyoruz , bu nedenle adı kullanıyoruz alertDirective.)
Genelde sadece geçersiz kılmaktan daha fazlasını yapmak isteyebileceğiniz için templateUrl, bu, örneğin bağlantıyı veya derleme işlevini geçersiz kılarak / sararak ( örneğin ) yönergeyi daha da genişletmek için iyi bir başlangıç noktası sağlar .
alertDirectiveanahtar kelime mi? evet ise, anahtar kelime ne için Tabs? Sekmelerde de benzer şeyler yapmaya çalışıyorum, ancak alert.js'ye baktım ve alertDirectiveorada nerede olduklarını göremiyorum .
$compileProvider, direktifinizi kaydettirdiğinizde direktifinizin adına bir 'Direktif' son eki ekler ( $filterProviderbenzer şekilde bir 'Filtre' sonekiyle yapar); çoğu amaç için bu görünmezdir, ancak dekorasyon yaparken bu son eki hedeflemeyi düşündüğünüz yönergeye eklemeniz gerekir. Örneğin, tabDirectiveya tabsetDirectivetam olarak net bir şekilde bulabildiğim her yerde belgelenen, ama burada benzer davranışlara bir referans kazanana vb $filterProvideren azından: docs.angularjs.org/api/ng/provider/$filterProvider
function(element, attributes)to templateUrl sağlayabileceğinize inanıyorum . Bunu bazı dinamik davranışlar için kullanabilirsiniz (özgün templateUrl işlevini veya bir özniteliğe bağlı olarak kendi url dizenizi vb. Döndür). Bununla birlikte, ui.bootstrap artık template-urlbir yönergede bir öznitelik sağlamanıza izin vermek için aynı işlevi kullanıyor , bu nedenle şablon yolunu doğrudan yönerge öğesi özniteliği aracılığıyla sağlamaktan memnunsanız, bunu potansiyel olarak da kullanabilirsiniz.
Pkozlowski.opensource'un cevabı gerçekten yararlı ve bana çok yardımcı oldu! Durumumda, tüm açısal şablon geçersiz kılmalarımı tanımlayan tek bir dosyaya sahip olmak için ince ayar yaptım ve yük boyutunu azaltmak için harici JS'yi yükledim.
Bunu yapmak için, açısal ui-bootstrap kaynak js dosyasının (örn. ui-bootstrap-tpls-0.6.0.js) Altına gidin ve ilgilendiğiniz şablonu bulun. Şablonu tanımlayan tüm bloğu kopyalayın ve onu geçersiz kılmalar JS dosyanıza yapıştırın.
Örneğin
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>");
}]);
Ardından, ui-bootstrap'in ardından geçersiz kılma dosyanızı ekleyin ve aynı sonucu elde edin.
Pkozlowski.opensource'un plunk dosyasının çatallı versiyonu http://plnkr.co/edit/iF5xw2YTrQ0IAalAYiAg?p=preview
$modalçok fazla bakım sorunu yaratmadan (umarım) daha fazla yapılandırılabilirlik elde etmek için hizmeti dekore ederken buldum .$provide.decorator('$modal'... Benim durumumda,modalWindowelementi oluşturmak istemedim . Hiç. Kullanmıyordum ve bulabildiğim en iyisi buydu. Varsa daha iyi bir yol duymak isterim.