如何使用 AngularJS 从 JSON 字符串显示 HTML

Posted 2023-03-03

【中文标题】如何使用 AngularJS 从 JSON 字符串显示 HTML

【英文标题】：How to show HTML with AngularJS from JSON string

【发布时间】：2016-02-13 15:30:30

【问题描述】：

我正在努力显示来自 JSON 字符串的 html 代码。您可以在地址中看到 HTML 标记。有什么办法可以正常显示吗？

我的模板是：

<div ng-app ng-controller="jsonp_example">
    <ul ng-repeat="item in data">
        <li>item.ID</li>
        <li>item.post_title</li>
        <li ng-bind-html-unsafe="getContent(obj)">item.custom_fields.sponsor_address</li>
        <li>
            <img src="item.custom_fields.sponsor_logo" >
            <ul>
                <li>
                   <hr>
                </li>
            </ul>
        </li>
    </ul>
</div>

还有脚本：

function jsonp_example($scope, $http) 
    $scope.getContent = function (obj) 
        return obj.custom_fields.sponsor_address
    ;

    var url = "https://eventident.com/api/getposts/?auth_key=s2mEus39R296M5F6n343A3dh9c62f7cm&custom_post=sponsors&callback=JSON_CALLBACK";

    $http.jsonp(url).success(function (data) 
        $scope.data = data.result;
    );

请随时修改我的 jsfiddle：http://jsfiddle.net/1295z4bc/

【参考方案1】：

您是否将 angular-sanitize.js 作为依赖项包含在内？ （作为脚本和角度模块依赖）

另外，你不需要用 ng-bind-html ，只需

<li ng-bind-html="item.custom_fields.sponsor_address"></li>

会的。

【讨论】：

嗨@Komo 我已经做到了：jsfiddle.net/1295z4bc/1 但不幸的是它仍然不起作用

您是否将其添加到您的模块依赖项中？ var myApp = angular.module('myApp', ['ngSanitize']);

看看这个小提琴：jsfiddle.net/1295z4bc/4 您需要使用 ng-app 属性并将其设置为您的角度模块的名称。我还更新了 Angular 的版本（1.2 有点旧）

超级。这就是我需要的。感谢一百万@Komo

【参考方案2】：

您需要包含ngSanitize服务并直接使用ng-bind-html。

这是您更新的 jsfiddle：http://jsfiddle.net/e01xj547/9/

【参考方案3】：

您可能需要通过使用 $sce 服务来明确信任 html 字符串。例如var trustedHtml=$sce.trustAsHtml('<em>My html string</em>');

在您的情况下，以下用法是适当的：

function jsonp_example($scope, $http, $sce) 

    $scope.getContent = function (obj) 
        return $sce.trustAsHtml(obj.custom_fields.sponsor_address);
    ;

    var url = "https://eventident.com/api/getposts/?auth_key=s2mEus39R296M5F6n343A3dh9c62f7cm&custom_post=sponsors&callback=JSON_CALLBACK";

    $http.jsonp(url).success(function (data) 
        $scope.data = data.result;
    );

用法示例：http://jsbin.com/zopenoqipi/2/edit?html,js,output