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

Javascript 如何使用JSON字符串中的AngularJS显示HTML,javascript,angularjs,jsonp,Javascript,Angularjs,Jsonp,我正在努力从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> <

我正在努力从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>

请随意修改我的JSFIDLE:

是否将angular-sanitize.js作为依赖项?(作为脚本和角度模块依赖项)

另外,您不需要使用ng bind html
{{}
,只需

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

  • 可以。

    您可能需要使用
    $sce
    服务明确信任html字符串。例如
    var trustedHtml=$sce.trustAsHtml(“我的html字符串”)

    在您的情况下,可使用以下用法:

    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;
        });
    }
    

    用法示例:

    您需要包括ngSanitize服务并直接使用
    ngbind html


    下面是您的更新版JSFIDLE:

    Hi@Komo我已经完成了:但它仍然无法正常工作。您是否将它添加到模块依赖项中<代码>var myApp=angular.module('myApp',['ngSanitize'])看看这个提琴:你需要使用ng app属性并将其设置为你的角度模块的名称。我还更新了angular的版本(1.2有点旧)Super。这就是我需要的。非常感谢@Komo
    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;
        });
    }