如何用 JSON 字符串中的 AngularJS 显示 HTML

Question

我正在努力显示 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}}" width="100">
            <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/

Answer 1

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

此外，您不需要 {{}} 使用 ng-bind-html，只需

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

会做。

Answer 2

您可能需要使用 $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

Answer 3

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

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

如何用 JSON 字符串中的 AngularJS 显示 HTML

How to show HTML with AngularJS from JSON string

javascript

jsonp

angularjs