Angular JS选项卡内容的HTML标签未渲染

Question

我有一个AngularJS应用程序。在该应用程序中，如果我们点击按钮，我们将显示一些具有选项卡的内容。通过点击每个选项卡，相应的数据将被获取并需要在那里显示。因此，我正在动态获取数据。但问题是，在下面的示例中，我的内容中有HTML标签（例如：“address”：“<b>NewYork</b>”）。但是当我点击地址选项卡时，它显示为<b>NewYork</b>，而不是NewYork。请给我建议。

$scope.tabs = [
       { title:'id', content:data[0].id, active:true },
       { title:'name', content:data[0].name,active:false},
       { title:'address', content:$sce.trustAsHtml(data[0].address),active:false},
       { title:'pin', content:data[0].pin,active:false}
];



<ul class="nav nav-tabs">
    <li ng-repeat="tab in tabs" ng-class="{active: tab.active}" >
            <a href="" ng-class="{active: tab.active}" ng-click="select(tab)" data-toggle="tab">{{tab.title}}</a>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane fade in" ng-repeat="tab in tabs" ng-class="{active: tab.active}" style="width:100%">
        {{tab.content}}
    </div>
</div>

- Mohan Raja

Answer 1

你可以使用 to_trusted 过滤器来解决这个问题。

<a href="" ng-class="{active: tab.active}" ng-click="select(tab)" data-toggle="tab" ng-bind-html="tab.title | to_trusted"></a>

在你的 JS 代码中添加过滤器。

angular.module("app", [])
.controller("ctrl", function ($scope) {
    //some code               
}).filter('to_trusted', ['$sce', function ($sce) {
    return function(text) {
        return $sce.trustAsHtml(text);
    };
}]);

- Ramesh Rajendran

Answer 2

默认情况下，Angular会对您的值进行清理，以将任何HTML标记显示为文本，这是出于明显的安全原因。如果您想在模板中包含来自对象的HTML，则可以在HTML元素上使用ng-bind-html =“yourvalue”指令，例如：

<span ng-bind-html="yourvalue"></span>

或者针对您的情况：

<a href="" ng-class="{active: tab.active}" ng-click="select(tab)" data-toggle="tab" ng-bind-html="tab.title"></a>

请记住，这并不是 Angular 中的最佳实践（虽然很诱人，我自己也经常使用它）。当然，这完全取决于您的特定情况，但通常情况下，您可能希望在模板中包含此类标记和/或在模型中包含某些具有重要意义的属性，并根据此进行调整显示。例如，如果 city.isFavourite 为 true，则可以在模板中有条件地添加一个 favourite CSS 类。

总之，本页面介绍了在模板中直接使用 HTML 时需要考虑的一些安全性问题：AngularJS API for $sanitize。

- Fasermaler

---

你好。感谢回复。但是我通过重复 tabs 数组来获取内容数据，因此我有在 tab.content 中的数据。那么我该如何使用 ng-bind-html？如果您不介意，可以给我提供一下我所给出的示例代码吗？ - Mohan Raja

我已经添加了一个更具体的示例到你的代码中，希望我做得对。也许需要注意的是，ng-bind-html替换了{{tab.title}}，这有点类似于ng-bind的速记形式（当它是标签中唯一的内容时）。 - Fasermaler

Answer 3

非常感谢大家。现在它已经正常工作了。我保持如下。

<div ng-bind-html="tab.content"></div>

- Mohan Raja