我正在创建一个AngularJS 单页应用程序。
数据将从json-格式的网络服务获取。
问题是某些文本元素带有预格式化的 html 标签
json 输出：
{
"text": "<p><span style="text-decoration: underline;"><strong>test text</string></span></p>"
}
现在我怎样才能显示这个文本并直接渲染 html，以便只向用户显示“测试”，其余的用作标记？
<h1>{{data.text}}</h1>
【问题讨论】：
标签： javascript html json angularjs ng-bind-html
您需要将ng-bind-html="data.text" 添加到您的 h1 标签中。
你的 html 看起来像：
<h1 ng-bind-html="data.text"></h1>
文档：ngBindHtml
【讨论】：
' 而不是 " 否则它会破坏一切。但这可能只是一个错字。
angular-sanitize 模块，现在可以使用了。
尝试使用这个https://docs.angularjs.org/api/ng/directive/ngBind
<script>
angular.module('bindExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.name = 'Whirled';
}]);
</script>
<div ng-controller="ExampleController">
<label>Enter name: <input type="text" ng-model="name"></label><br>
Hello <span ng-bind="name"></span>!
</div>
【讨论】：
Update2：是否可以为您剥离 html？可以这样做：
angular.module('myApp.filters', []).
filter('htmlToPlaintext', function() {
return function(text) {
return String(text).replace(/<[^>]+>/gm, '');
};
}
);
还有你的html：
<div>{{myText | htmlToPlaintext}}</div>
查看更多信息：angularjs to output plain text instead of html
更新：你真的需要 json 中的 html 吗？最好将您的 html 存储在视图中并从您的 json 中获取数据。很好的分离和非常容易使用。
这是可能的，但不像非html那么容易（安全性高）。
在 Angular 1.3 中你需要如下：
<div ng-bind-html="htmlBind"></div>
在你的控制器中添加这个：
$scope.htmlBind = $sce.trustAsHtml('<span>Hi, I am <em>Joe</em>');
解释：你看到了$sce：
$sce 是一项为 AngularJS 提供严格上下文转义服务的服务。
trustAs（类型、值）
委托给 $sceDelegate.trustAs。因此，返回一个受 angular 信任的对象，用于指定的严格上下文转义上下文（例如 ng-bind-html、ng-include、任何 src 属性插值、任何 dom 事件绑定属性插值（例如 onclick）等。 ) 使用提供的值。请参阅 * $sce 以启用严格的上下文转义。
在这里阅读更多：
【讨论】：
json 响应，并且希望通过<h1 ng-bind-html="data.text"></h1> 动态引用html 中的元素，而不必从控制器中调用$sce。