web-dev-qa-db-ja.com

Angularjs bootstrapタブセットタブの見出し

アンギュラーjs bootstrap= tabset tab heading.html内にhtmlを書くことが可能かどうか疑問に思っています。タイトル内にsvgを追加しようとしています。私が抱えている問題。

<tabset>
  <tab heading="<span>hello</span><em>1</em>">One</tab>
  <tab heading="Two">Two</tab>
  <tab heading="Three">Three</tab>
</tabset>

http://plnkr.co/edit/qFsFGDNUIJj9nIF51Ap

何か案は？

ありがとう

angularjsangular-ui-bootstrapangularjs-bootstrap
22
Ross_

角度Bootstrap v0.14 +

Angular Bootstrap v0.14 導入された新しいプレフィックス 以前に提供されたほとんどのコントロール。以下の元の答えは引き続き適用されますが、新しいタグ名uib-tabsetを使用する必要があります、uib-tab、およびuib-tab-heading。

<uib-tabset>
  <uib-tab>
    <uib-tab-heading>
      <span>hello</span><em>1</em>
    </uib-tab-heading>
    One
  </uib-tab>
  <uib-tab heading="Two">Two</uib-tab>
  <uib-tab heading="Three">Three</uib-tab>
</uib-tabset>

角度Bootstrap <v0.14

見出し内にHTMLが必要な場合は、tab要素内でtab-heading要素を使用する必要があります（ docs の例に示すように）。

<tabset>
  <tab>
    <tab-heading>
      <span>hello</span><em>1</em>
    </tab-heading>
    One
  </tab>
  <tab heading="Two">Two</tab>
  <tab heading="Three">Three</tab>
</tabset>

更新されたプランカー ここ 。

45
Taylor Buchanan

2016年から

バージョンversion 0.14.0（2015.10.09）タブは0.14.0を使用しているため、受け入れられる答えはi-bootstrap以前のuib-については問題ありませんプレフィックス。

changelog を参照してください

したがって、すべてのタグをuib-プレフィックスで置き換える必要があります

<uib-tabset>
  <uib-tab>
    <uib-tab-heading>
      <span>hello</span><em>1</em>
    </uib-tab-heading>
    One
  </uib-tab>
  <uib-tab heading="Two">Two</uib-tab>
  <uib-tab heading="Three">Three</uib-tab>
</uib-tabset>
5
Merlin

TABタグにIDを指定し、jQueryを使用してhtmlを拡張できます。
... tab id = "myid" ....

次にjQuery（ "＃myid"）。html（ "新しいHTML"）

0
Scott

[編集]テイラーブキャナンの答えは正解です！

Tabsディレクティブで使用されるテンプレートを見ると、見出しのコンテンツはエスケープされます： https://github.com/angular-ui/bootstrap/blob/192768e109b5c4a50c7dcd320e09d05fedd4298a/template/tabs/tab.html#L2 =

そのため、見出しでhtmlを使用することはできません。

次のようにタブテンプレートを再定義することで回避策を作成できます。

angular.module("template/tabs/tab.html").run(["$templateCache", function($templateCache) {
  $templateCache.put("template/tabs/tab.html",
    "<li ng-class=\"{active: active, disabled: disabled}\">\n" +
    "  <a ng-click=\"select()\" tab-heading-transclude ng-bind-html=\"heading\"></a>\n" +
    "</li>\n" +
    "");
}]);

また、htmlコンテンツを安全にバインドするには、angular-sanitize.jsを含める必要があります。

ここでの作業デモ： http://plnkr.co/edit/ep5f1GY12vSixT4xtxFy?p=preview

0
badsyntax