如何在AngularJS中使用动态构建的
JSON对象创建一个application / ld json脚本标记.
这就是我需要脚本标签的样子
<script type="application/ld+json">
{
"@context": "http://schema.org","@type": "Place","geo": {
"@type": "GeoCoordinates","latitude": "40.75","longitude": "73.98"
},"name": "Empire State Building"
}
</script>
我已经尝试了以下代码,但我不能让它工作：
HTML
<div ng-controller="TestController">
<script type="application/ld+json">
{{jsonId|json}}
</script>
{{jsonId|json}}
</div>
调节器
var myApp = angular.module('application',[]);
myApp.controller('TestController',['$scope',function($scope) {
$scope.jsonId = {
"@context": "http://schema.org","geo": {
"@type": "GeoCoordinates","longitude": "73.98"
},"name": "Empire State Building"
};
}]);
脚本标签中的表达式不执行.
脚本标签之外的表达式正确执行并显示JSON
请参阅jsfiddle
解决方法
一杯咖啡后,我记得有一个$sce服务与一个trustAsHtml功能.
我创建了一个接受json参数以便于重用的指令
请参阅以下更新和工作代码：
HTML
<div ng-controller="TestController"> <jsonld data-json="jsonId"></jsonld> </div>
使用Javascript
var myApp = angular.module('application',"name": "Empire State Building"
};
}]).directive('jsonld',['$filter','$sce',function($filter,$sce) {
return {
restrict: 'E',template: function() {
return '<script type="application/ld+json" ng-bind-html="onGetJson()"></script>';
},scope: {
json: '=json'
},link: function(scope,element,attrs) {
scope.onGetJson = function() {
return $sce.trustAsHtml($filter('json')(scope.json));
}
},replace: true
};
}]);
这是脚本输出的映像
请看更新jsfiddle