23

I am wondering whether it is possible to write html inside an angularjs bootstrap tabset tab heading. I am trying to add a svg inside the title. I have created a quick snippet in plunker to try and demonstrate the issue I am having.

<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/qFsFGDNUIJj9nIF51ApU

any ideas?

thanks

Gal Margalit
  • 5,525
  • 6
  • 52
  • 56
Ross_
  • 235
  • 1
  • 2
  • 8

5 Answers5

47

Angular Bootstrap v0.14+

Angular Bootstrap v0.14 introduced new prefixes for most previously provided controls. The original answer below still applies, but you must use the new tag names uib-tabset, uib-tab, and 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>

Angular Bootstrap < v0.14

You should be using the tab-heading element within the tab element if you want HTML within the heading (as shown in the example in the 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>

Updated plunker here.

Taylor Buchanan
  • 4,155
  • 1
  • 28
  • 40
  • 1
    Bare in mind that if you're trying to get this to work in IE8 then you need to use attributes rather than elements. So: `
    hello
    `     – lappy Sep 30 '14 at 09:52
5

Since 2016

The accepted answer is ok for the ui-bootstrap prior version 0.14.0, since version 0.14.0 (2015.10.09) tabs use uib- prefix.

See changelog

So you have to replace all tags with uib- prefix

<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>
Merlin
  • 4,907
  • 2
  • 33
  • 51
0

[edit] Taylor Buchanan's answer is the correct answer!

Looking at the template used by the tabs directive, the headings content will be escaped: https://github.com/angular-ui/bootstrap/blob/192768e109b5c4a50c7dcd320e09d05fedd4298a/template/tabs/tab.html#L2

So it is not possible to use html in your headings.

You can create a work-around by re-defining the tab template like so: 

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" +
    "");
}]);

You will also need to nclude angular-sanitize.js to safely bind html contents.

Working Demo here: http://plnkr.co/edit/ep5f1GY12vSixT4xtxFy?p=preview

badsyntax
  • 9,394
  • 3
  • 49
  • 67
0

You can give your TAB tag an id and then use jQuery to augment the html.
...tab id="myid"....

and then jQuery("#myid").html("New Html")

Scott
  • 1,690
  • 3
  • 13
  • 18
  • This is not in line with "The Angular Way". See http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background – isherwood Dec 04 '14 at 17:27
-1

            <li heading="Status" class="ng-isolate-scope var" ng-model="(var = 'active: active')" >
                <a href="/ibox">Status1</a>
            </li>


            <li heading="Status" class="ng-isolate-scope var" ng-model="var = 'active: active'">
                <a href="/netapp">Status</a>
            </li>


    </tabset>
Yoni Shperling
  • 137
  • 1
  • 3