[英]How to show HTML with AngularJS from JSON string
我正在努力显示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/
您是否将angular-sanitize.js作为依赖项包括在内? (作为脚本和角度模块依赖性)
另外,您无需{{}}
使用ng-bind-html,只需
<li ng-bind-html="item.custom_fields.sponsor_address"></li>
会做。
您需要包括ngSanitize服务,并直接使用ng-bind-html
。
这是您的更新的jsfiddle: http : //jsfiddle.net/e01xj547/9/
您可能需要使用$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;
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.