web-dev-qa-db-ja.com

Angular UI Bootstrapで特定のテンプレートをオーバーライドできますか？

Ui-bootstrap-tplsファイルから単一の特定のテンプレートをオーバーライドする方法があるかどうか興味があります。デフォルトのテンプレートの大部分は私のニーズに合っていますが、すべてのデフォルトのテンプレートを取得し、それらを非tplsバージョンに接続するプロセス全体を経ることなく、置き換えたい特定のテンプレートがいくつかあります。

angularjsangular-uiangular-ui-bootstrap
87
Jeremy Privett

はい、 http://angular-ui.github.io/bootstrap のディレクティブは高度にカスタマイズ可能で、テンプレートの1つを簡単にオーバーライドできます（他のディレクティブについてはデフォルトのテンプレートに依存しています）。

$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

121
pkozlowski.opensource

$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

（装飾するディレクティブ名に「Directive」サフィックスを追加する必要があることに注意してください。上記では、UI Bootstrapのalertディレクティブを装飾するため、alertDirectiveという名前を使用します。）

単にtemplateUrlをオーバーライドするだけでなく、それ以上のことをしたい場合があるので、これは、たとえばリンクまたはコンパイル関数をオーバーライド/ラップすることにより、ディレクティブをさらに拡張するための良い出発点となります（ たとえば ）。

79
JcT

pkozlowski.opensourceからの答えは本当に役に立ち、私を大いに助けてくれました！私の状態では、すべてのangularテンプレートオーバーライドを定義する単一のファイルを持つように調整し、ペイロードサイズを抑えるために外部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の分岐の分岐バージョン http://plnkr.co/edit/iF5xw2YTrQ0IAalAYiAg?p=preview

27
Matt Byrne

template-url="/app/.../_something.template.html"を使用して、そのディレクティブの現在のテンプレートをオーバーライドできます。

（少なくともアコーディオンBootstrapで動作します。）

7
crimson