AngularUI Bootstrapの特定のテンプレートを上書きできますか?


88

ui-bootstrap-tplsファイルから単一の特定のテンプレートを上書きする方法があるかどうか知りたいです。デフォルトテンプレートの大部分は私のニーズに適合していますが、すべてのデフォルトテンプレートを取得してそれらを非TPLバージョンに接続するプロセス全体を実行せずに、置き換えたい特定のテンプレートがいくつかあります。


1
また、$modal(うまくいけば)メンテナンスの頭痛の種を作りすぎることなく、サービスを装飾して構成可能性を高めることもできました。$provide.decorator('$modal'...私の場合、modalWindow要素をレンダリングしたくありませんでした。ずっと。私はそれを使用していなかっただけで、これが思いついた最高のものでした。誰かがそれを持っているなら、もっと良い方法を聞きたいです。
ボディ14

回答:


123

はい、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


19
私はこの答えが好きです。Angular UIのドキュメンテーションページに含まれていないことが気に入らず、モーダルを表示するだけの簡単な方法を理解するのにかなり時間がかかりました。
Tri Vuong 2013

2
@BruceBannerドキュメンテーションと確かな作業例は、Angular UIの2つの最大の落とし穴です。プロジェクトは素晴らしいですが、それはいくつかの優しい開発者の愛を必要とします。
ロビンファンバーレン2014

1
@RobinvanBaalenこれは、angular-js機能です(angular-uiではありません)。すでにAngular jsの公式ドキュメントに記載されています
vikki

$ provide.decoratorに関する@JcTの回答を確認してください。これは、ディレクティブテンプレートをオーバーライドするAngularの方法(この場合は良い方法)です。そして、それはかなり簡単です。テンプレートを$ templateCacheに追加/オーバーライドするだけでは、実際にはベストプラクティスではありません。
John

@John私は、「それがAngularの方法(この場合は良い方法)」であり、「テンプレートを$ templateCacheに追加/オーバーライドするだけが実際にはベストプラクティスではない」のですが、angular- uiとAngularのメンテナテンプレートを上書きしても問題はないことを保証します。共有する特定の問題がない限り...
pkozlowski.opensource 2015

79

使用する $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、リンクやコンパイル関数(など)をオーバーライド/ラップすることで、ディレクティブをさらに拡張するための出発点として適しています。


9
これは正しいソリューションであり、角度のベストプラクティスに従います。文字列を使用してHTMLを作成したり、サードパーティのスクリプトを挿入するindex.htmlファイルに明示的に含めたりしてはなりません。@JcTありがとう!
TommyMac、2015

2
こんにちは、alertDirectiveキーワードですか?はいの場合、キーワードはTabs何ですか?私はタブで同様のことをしようとしていますが、alert.jsを調べましたがalertDirective、そこにどこがあったのかわかりません。
codenamezero

4
angularjs $compileProviderは、登録時にディレクティブの名前に「ディレクティブ」サフィックスを付加します($filterProvider「フィルター」サフィックスでも同様です)。ほとんどの場合、これは表示されませんが、装飾するときは、対象とするディレクティブにこのサフィックスを追加する必要があります。たとえば、tabDirectiveまたはtabsetDirective、正確にはっきりと私は見つけることができる場所であればどこでも文書が、ここについても同様の挙動を基準だないなど$filterProvider、少なくとも:docs.angularjs.org/api/ng/provider/$filterProvider
JCT

2
@JcTに感謝します。すばらしい回答です。これが正しい方法です。そして、あなたが言うように、サードパーティ指令の「装飾」への良い出発点:)
John Bernardsson

1
@ValeraTumash:遅い答えてごめんね。ええ、私はあなたの設定が壊れてしまうと思います。ただし、Angular v1.3以降では、function(element, attributes)templateUrlにを指定できると思います。これをいくつかの動的動作に使用できます(属性に応じて、元のtemplateUrl関数または独自のURL文字列を返します)。ただし、ui.bootstrapも同じ機能を使用template-urlしてディレクティブに属性を指定できるようになりました。ディレクティブ要素の属性を介してテンプレートパスを直接指定したい場合は、この機能を使用することもできます。
JcT 2016年

27

pkozlowski.opensourceからの回答は本当に役に立ち、私をたくさん助けてくれました!私の状況でそれを微調整して、すべての角度テンプレートのオーバーライドを定義する単一のファイルを用意し、ペイロードサイズを抑えるために外部JSをロードしました。

これを行うには、角度付き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


1
私はこれと同じパターンを使用していますが、機能しますが、もっと良い方法があればいいのにと思います。私は服を脱ぐよりも設定を好むと思います。
ボディ14

7

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

(少なくともアコーディオンブートストラップで動作します。)

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.