您可以覆盖 AngularUI Bootstrap 中的特定模板吗? [英] Can you override specific templates in AngularUI Bootstrap?

查看：22 发布时间：2021/11/10 3:38:42 angularjs angular-ui angular-ui-bootstrap

本文介绍了您可以覆盖 AngularUI Bootstrap 中的特定模板吗?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

解决方案

是的，来自 http://angular-ui.github 的指令.io/bootstrap 是高度可定制的，很容易覆盖其中一个模板(并且仍然依赖于其他指令的默认模板).

提供 $templateCache 就足够了，或者直接提供它(如在 ui-bootstrap-tpls 文件中所做的那样)或者 - 可能更简单 - 使用覆盖模板<身体><div ng-controller="AlertDemoCtrl"><alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)">{{alert.msg}}</警报><button class='btn' ng-click="addAlert()">添加提醒</button>

</html>

Live plunker:http://plnkr.co/edit/gyjVMBxa3fToYTFJtnij?p=preview

I'm curious if there's a way to override single, specific templates from the ui-bootstrap-tpls file. The vast majority of the default templates fit my needs, but there's a couple specific ones I'd like to replace without going through the whole process of grabbing all the default templates and getting them wired up to the non-tpls version.

解决方案

Yes, directives from http://angular-ui.github.io/bootstrap are highly customizable and it is easy to override one of the templates (and still rely on the default ones for other directives).

It is enough to feed $templateCache, either feeding it directly (as done in the ui-bootstrap-tpls file) or - probably simpler - override a template using the <script> directive (doc).

A contrived example where I'm changing alert's template to swap x for Close is shown below:

<!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

这篇关于您可以覆盖 AngularUI Bootstrap 中的特定模板吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

您可以覆盖 AngularUI Bootstrap 中的特定模板吗? [英] Can you override specific templates in AngularUI Bootstrap?

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录关闭

您可以覆盖 AngularUI Bootstrap 中的特定模板吗? [英] Can you override specific templates in AngularUI Bootstrap?

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录 关闭

登录关闭