BinaryDevelop
  1. ホーム
  2. angularjs

[解決済み] AngularUI Bootstrapで特定のテンプレートをオーバーライドできますか？

2023-03-29 13:55:31

質問

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

どのように解決するのですか?

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

を送り込むだけで十分です。 $templateCache を直接与えるか、( ui-bootstrap-tpls ファイルで行われているように) 直接与えるか、あるいは - おそらくもっと単純に - <script> ディレクティブを使ってテンプレートを上書きすることです ( doc ).

私がalertのテンプレートを交換するために変更している、作為的な例です。 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

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します