Html - 呈现包含html标签的文本会将标签显示为纯文本

Question

我正在使用angularJS，我有一个属性'description'，我必须向用户显示。问题是这个属性包含一些html代码，它以纯文本形式显示给用户。这是我的代码：

<span class="cst-bold">Activity description </span>
{{pack.activities.current['description']}}

我还尝试用

包围变量，但它也没有解决任何问题。只是有点不同的格式。以下是使用<pre>代码后的结果：

如何解决标签问题？谢谢！

Answer 1

使用受信任的自定义过滤器和ng-bind-html示例

angular.module('app',[])
.controller('Ctrl',function($scope){
     $scope.description="<h1>Hallo World!</h1>";
})
.filter('trusted', function($sce){
    return function(html){return $sce.trustAsHtml(html)
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="Ctrl">
   <span class="cst-bold">Activity description </span>
   <span>{{description}}</span>
   <span ng-bind-html="description|trusted"></span>
</div>