angularjs – 你可以重写AngularUI Bootstrap中的特定模板？

发布时间：2020-12-17 09:11:30 所属栏目：安全来源：网络整理

导读：我很好奇，如果有一个方法来覆盖单个，特定的模板从ui-bootstrap-tpls文件。绝大多数默认模板适合我的需要，但有一些特定的我想替换，而不必通过抓取所有的默认模板，并把它们连接到非tpls版本的整个过程。是的，从 http://angular-ui.github.io/bootstrap

我很好奇，如果有一个方法来覆盖单个，特定的模板从ui-bootstrap-tpls文件。绝大多数默认模板适合我的需要，但有一些特定的我想替换，而不必通过抓取所有的默认模板，并把它们连接到非tpls版本的整个过程。

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

这足以馈送$ 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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!