如何使用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

是否包含角sanitize.js的依賴？ （作爲腳本和角模塊依賴）

而且，你不需要{{}}與NG綁定，HTML，只是

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

會做。

Answer 2

您可能需要使用$sce服務明確信任該html字符串。 E.g var trustedHtml=$sce.trustAsHtml('<em>My html string</em>');

在你的情況下使用會appropirate：

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/