Angular bootstrap HTML processing of tab dynamic content

Question

I'm using Angular Bootstrap tabs. I'd like to use them with their content loaded from an Angular Model. However, all HTML in the content loaded fromt eh model is ignored. i.e. if I have

  $scope.tabs = [
    { title:'Dynamic Title 1', content:"<b>Dynamic</b> content 1" },
    { title:'Dynamic Title 2', content:'Dynamic content 2', disabled: true }
  ];

The first tab's content is "Dynamic content 1", not "Dynamic content 1" with "Dynamic" in bold. If the content as statically supplied in the html file, it would show correctly.

Plunker to demonstrate the problem

Anyone know how I can force the html to be parsed properly?

Thank you, Greg

you need to make use of $sce and trustAsHtml() to allow dynamic content. docs.angularjs.org/api/ng/service/$sce#! — Claies
– Claies, Commented Feb 17, 2015 at 20:45
When parsing html you may want to use ng-bind-html --> docs.angularjs.org/api/ng/directive/ngBindHtml — floor
– floor, Commented Feb 17, 2015 at 20:51

Renan Ferreira · Accepted Answer · 2015-02-17 21:34:36Z

1

Based in the comments, you can create a function called:

scope.trustHtml = function(content){
    return $sce.trustAsHtml( content );
}

and then change your HTML to be like:

<tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disabled="tab.disabled">
    <span ng-bind-html="trustHtml(tab.content)"></span>
</tab>

answered Feb 17, 2015 at 21:34

Renan Ferreira

2,1603 gold badges21 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Greg Dougherty Over a year ago

Thank you, that works. I tried something based on the comments, and it failed so completely I threw it away, and now have no idea what I did differently. :-) Oh, well, thank you for something that works!

Collectives™ on Stack Overflow

Angular bootstrap HTML processing of tab dynamic content

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related