CODEWITHSUNDEEP
htmlangularjstwitter-bootstrap
Greg Dougherty
Greg Dougherty

Reputation: 3461

Angular bootstrap HTML processing of tab dynamic content

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

Upvotes: 0

Views: 637

Answers (1)

Renan Ferreira
Renan Ferreira

Reputation: 2150

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>

Upvotes: 1

Related Questions