ui-bootstrap-tplsファイルから単一の特定のテンプレートを上書きする方法があるかどうか知りたいです。デフォルトテンプレートの大部分は私のニーズに適合していますが、すべてのデフォルトテンプレートを取得してそれらを非TPLバージョンに接続するプロセス全体を実行せずに、置き換えたい特定のテンプレートがいくつかあります。
ui-bootstrap-tplsファイルから単一の特定のテンプレートを上書きする方法があるかどうか知りたいです。デフォルトテンプレートの大部分は私のニーズに適合していますが、すべてのデフォルトテンプレートを取得してそれらを非TPLバージョンに接続するプロセス全体を実行せずに、置き換えたい特定のテンプレートがいくつかあります。
回答:
はい、http://angular-ui.github.io/bootstrapのディレクティブは高度にカスタマイズ可能で、テンプレートの1つをオーバーライドするのは簡単です(他のディレクティブはデフォルトのテンプレートに依存します)。
$templateCache
直接フィードする(ui-bootstrap-tpls
ファイルで行うように)か、またはおそらくより単純な- <script>
ディレクティブ(doc)。
私はスワップにアラートのテンプレートを変更しています不自然な例x
については、Close
以下に示します。
<!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>
ライブプランカー:http ://plnkr.co/edit/gyjVMBxa3fToYTFJtnij?p=preview
$provide.decorator
を使用$provide
してディレクティブを装飾することで、を直接いじる必要がなくなり$templateCache
ます。
代わりに、通常のように、任意の名前で外部テンプレートhtmlを作成し、ディレクティブをオーバーライド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;
});
}
pkozlowski.opensourceのplunkrのフォーク:http ://plnkr.co/edit/RE9AvUwEmKmAzem9mfpI?p=preview
(装飾するディレクティブ名に 'Directive'サフィックスを追加する必要があることに注意してください。上記では、UI Bootstrapのalert
ディレクティブを装飾しているので、名前を使用していますalertDirective
。)
多くの場合、をオーバーライドするだけでなくtemplateUrl
、リンクやコンパイル関数(など)をオーバーライド/ラップすることで、ディレクティブをさらに拡張するための出発点として適しています。
alertDirective
キーワードですか?はいの場合、キーワードはTabs
何ですか?私はタブで同様のことをしようとしていますが、alert.jsを調べましたがalertDirective
、そこにどこがあったのかわかりません。
$compileProvider
は、登録時にディレクティブの名前に「ディレクティブ」サフィックスを付加します($filterProvider
「フィルター」サフィックスでも同様です)。ほとんどの場合、これは表示されませんが、装飾するときは、対象とするディレクティブにこのサフィックスを追加する必要があります。たとえば、tabDirective
またはtabsetDirective
、正確にはっきりと私は見つけることができる場所であればどこでも文書が、ここについても同様の挙動を基準だないなど$filterProvider
、少なくとも:docs.angularjs.org/api/ng/provider/$filterProvider
function(element, attributes)
templateUrlにを指定できると思います。これをいくつかの動的動作に使用できます(属性に応じて、元のtemplateUrl関数または独自のURL文字列を返します)。ただし、ui.bootstrapも同じ機能を使用template-url
してディレクティブに属性を指定できるようになりました。ディレクティブ要素の属性を介してテンプレートパスを直接指定したい場合は、この機能を使用することもできます。
pkozlowski.opensourceからの回答は本当に役に立ち、私をたくさん助けてくれました!私の状況でそれを微調整して、すべての角度テンプレートのオーバーライドを定義する単一のファイルを用意し、ペイロードサイズを抑えるために外部JSをロードしました。
これを行うには、角度付きui-bootstrapソースjsファイル(例:)の下部に移動し、ui-bootstrap-tpls-0.6.0.js
目的のテンプレートを見つけます。テンプレートを定義するブロック全体をコピーし、オーバーライドJSファイルに貼り付けます。
例えば
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>");
}]);
次に、ui-bootstrapの後にオーバーライドファイルを含めるだけで、同じ結果が得られます。
フォークトバージョンpkozlowski.opensourceさんplunk http://plnkr.co/edit/iF5xw2YTrQ0IAalAYiAg?p=preview
$modal
(うまくいけば)メンテナンスの頭痛の種を作りすぎることなく、サービスを装飾して構成可能性を高めることもできました。$provide.decorator('$modal'
...私の場合、modalWindow
要素をレンダリングしたくありませんでした。ずっと。私はそれを使用していなかっただけで、これが思いついた最高のものでした。誰かがそれを持っているなら、もっと良い方法を聞きたいです。