Question

我正在使用Angular Bootstrap标签。我想将它们与从Angular模型加载的内容一起使用。但是，忽略从eh模型加载的内容中的所有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>

角度引导HTML处理选项卡动态内容

1 个答案: