标签动态内容的角度引导HTML处理

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. ie 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 " 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

Answer 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>