Question

我有一个angularjs应用程序。在该应用程序中，如果我们点击按钮，我们将显示一些带有标签的内容。通过单击每个选项卡，将获取相应的数据并需要在那里显示。所以我正在动态获取数据。但问题在于下面的例子，我在内容中有HTMl标签（EX： - ＆＃34;地址＆＃34;：＆＃34; <b>NewYork</b>＆＃34;）。但是当我点击地址标签时，它显示为<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);
    };
}]);

Answer 2

默认情况下，出于明显的安全原因，angular会清理您的值以将任何HTML标记显示为文本。如果要在模板中包含对象的HTML，可以使用ng-bind-html =＆＃34; yourvalue＆＃34; HTML元素的指令，即：

<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>

请记住，虽然这并不是角度的最佳实践（虽然很诱人，但我已经经常使用它）。这一切当然取决于您的具体情况，但一般情况下您可能希望在模板中包含此类标记和/或在模型中包含一些具有一定重要性的属性，并根据该属性调整显示。例如，如果 city.isFavourite 为true，则可以在模板中有条件地向其添加收藏 CSS类。

要进行整理，在您的模板中逐字使用HTML时，此页面会考虑一些安全注意事项：AngularJS API for $sanitize

Answer 3

非常感谢你们。现在工作正常。我保持如下。

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

Angular js标签内容HTML标签无法呈现

3 个答案: