作为对象值发送的HTML字符串不会在客户端上呈现

Question

希望有人能帮忙......

我发送的对象值如

{"message": "< img src='aaaa' />"}从我的节点API到AngularJS。

在我的客户端，我希望只调用{{message}}来显示呈现的img属性。不幸的是，它呈现< img src= 'aaaa' />。

我相信由于对象值是一个字符串，它将整体呈现为一个字符串 - < img src= 'aaaa' >

如何克服场景？ 任何帮助将不胜感激。

Answer 1

您可以使用ngSanitize呈现您从服务器获得的HTML。它基本上清理（确定在UI中呈现的安全性）你的HTML在它在UI中呈现它之前。

在脚本中加入angular-sanitize.js

<div ng-bind-html="msg.message"></div> 

并将ngSanitize包含为模块依赖项。

Plunker

Answer 2

Working Plnkr

您正在返回JSON数据。据我了解，您希望显示key，而不是value。

<强> HTML：

 <div ng-repeat="(key, value) in data">
    {{key}}
 </div>

<强> JavaScript的：

 $scope.data = {"message": "< img src='aaaa' />"};

Answer 3

在控制器中使用$ sce.trustAsHtml（）来转换html字符串。

$scope.datas=$sce.trustAsHtml($scope.data.message);

然后在您的视图中，使用ng-bind-html绑定html。

<div ng-bind-html="datas">

选中此demo