您可以覆盖AngularUI Bootstrap中的特定模板吗？

一尘不染

您可以覆盖AngularUI Bootstrap中的特定模板吗？

angularjs

我很好奇，是否有一种方法可以覆盖ui-bootstrap-
tpls文件中的单个特定模板。绝大多数默认模板都可以满足我的需求，但是我想替换几个特定的模板，而无需完成获取所有默认模板并将它们连接到非tpls版本的整个过程。

阅读 228

2020-07-04

共1个答案

一尘不染

是的，来自 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

2020-07-04