我很好奇,如果有一个方法来覆盖单个,特定的模板从ui-bootstrap-tpls文件。绝大多数默认模板适合我的需要,但有一些特定的我想替换,而不必通过抓取所有的默认模板,并把它们连接到非tpls版本的整个过程。
是的,从
http://angular-ui.github.io/bootstrap的指令是高度可定制的,它很容易覆盖一个模板(仍然依赖于其他指令的默认值)。
原文链接:https://www.f2er.com/angularjs/147040.html这足以馈送$ templateCache,直接馈送(如在ui-bootstrap-tpls文件中做的)或者 – 可能更简单 – 使用< script>指令(doc)。
一个假设的例子,我改变警报的模板交换x为关闭如下所示:
<!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>
Live plunker:http://plnkr.co/edit/gyjVMBxa3fToYTFJtnij?p=preview