标签动态内容的角度引导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文件中静态提供了内容，则它将正确显示。

演示问题

任何人都知道我如何可以强制正确地解析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>