90

我很好奇是否有办法覆盖 ui-bootstrap-tpls 文件中的单个特定模板。绝大多数默认模板都符合我的需求，但是我想替换几个特定的​​模板，而无需经历获取所有默认模板并将它们连接到非 tpls 版本的整个过程。

4

4 回答 4

123

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

于 2013-07-16T13:09:36.677 回答
81

使用$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

（请注意，您必须将“指令”后缀附加到您打算装饰的指令名称。上面，我们正在装饰 UI Bootstrap 的alert指令，因此我们使用名称alertDirective。）

由于您可能经常想要做的不仅仅是覆盖templateUrl，这为进一步扩展指令提供了一个很好的起点，例如通过覆盖/包装链接或编译函数（例如）。

于 2014-10-13T12:22:32.960 回答
27

pkozlowski.opensource的答案非常有用，对我帮助很大！我在我的条件下对其进行了调整，以使一个文件定义我所有的角度模板覆盖并加载外部 JS 以降低有效负载大小。

为此，请转到 angular 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

于 2013-11-01T02:48:46.153 回答
7

您可以使用template-url="/app/.../_something.template.html"该指令覆盖当前模板。

（至少在 Accordion Bootstrap 中工作。）

于 2015-11-13T16:46:30.293 回答