html - Angular js 标签内容 HTML 标签不呈现

Question

我有一个 angularjs 应用程序。在该应用程序中，如果我们单击按钮，我们将显示一些带有选项卡的内容。通过单击每个选项卡，相应的数据将被提取并需要显示在那里。所以我正在动态获取数据。但问题出在下面的例子中，我在内容中有 HTMl 标签(例如:-“地址”:“<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>

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);
    };
}]);