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

Question

我正在使用Angular Bootstrap选项卡。我想用他们的内容从Angular模型加载。但是，从模型加载的内容中的所有HTML都将被忽略。也就是说，如果我有

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

第一个选项卡的内容是大胆“动态内容1”，而不是“动态内容1”与“动态”。如果html文件中静态提供的内容将显示正确。

Plunker to demonstrate the problem

任何人都知道我怎么可以强制正确解析的HTML？

谢谢 格雷格

Answer 1

总部设在评论，你可以创建一个名为功能：

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

，然后改变你的HTML是这样的：

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