Jer*_*ett 87 angularjs angular-ui angular-ui-bootstrap
我很好奇是否有办法覆盖ui-bootstrap-tpls文件中的单个特定模板.绝大多数默认模板都符合我的需求,但有一些我想要替换的特定模板,而不是通过抓取所有默认模板并将它们连接到非tpls版本的整个过程.
pko*_*rce 122
是的,来自http://angular-ui.github.io/bootstrap的指令是高度可定制的,并且很容易覆盖其中一个模板(并且仍然依赖于其他指令的默认模板).
它足以$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
JcT*_*JcT 79
$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,这为进一步扩展指令提供了一个很好的起点,例如通过覆盖/包装链接或编译函数(例如).
Mat*_*rne 27
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的普拉克http://plnkr.co/edit/iF5xw2YTrQ0IAalAYiAg?p=preview