[英]AngularJS script tag JSON-LD
How do you create an application/ld+json
script
tag with a dynamically built JSON object in AngularJS . 如何在AngularJS中使用动态构建的JSON对象创建
application/ld+json
script
标记。
This is what I need the script tag to look like 这就是我需要脚本标签的样子
<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>
I have tried the following code but I cant get it to work: 我尝试了以下代码,但我无法让它工作:
HTML HTML
<div ng-controller="TestController">
<script type="application/ld+json">
{{jsonId|json}}
</script>
{{jsonId|json}}
</div>
Controller 调节器
var myApp = angular.module('application', []);
myApp.controller('TestController', ['$scope', function($scope) {
$scope.jsonId = {
"@context": "http://schema.org",
"@type": "Place",
"geo": {
"@type": "GeoCoordinates",
"latitude": "40.75",
"longitude": "73.98"
},
"name": "Empire State Building"
};
}]);
The expression inside the script tag does not execute. 脚本标记内的表达式不会执行。 The expression outside the script tag executes correctly and displays the JSON
脚本标记外部的表达式正确执行并显示JSON
After a cup of coffee I remembered there is a $sce
service with a trustAsHtml
function. trustAsHtml
一杯咖啡后,我记得有一个带有trustAsHtml
功能的$sce
服务。
I created a directive that accepts a json
parameter for easy re-use 我创建了一个接受
json
参数的指令,以便于重用
Please see updated and working code below: 请参阅以下更新和工作代码:
HTML HTML
<div ng-controller="TestController">
<jsonld data-json="jsonId"></jsonld>
</div>
Javascript 使用Javascript
var myApp = angular.module('application', []);
myApp.controller('TestController', ['$scope', function($scope) {
$scope.jsonId = {
"@context": "http://schema.org",
"@type": "Place",
"geo": {
"@type": "GeoCoordinates",
"latitude": "40.75",
"longitude": "73.98"
},
"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
};
}]);
Here is a image of the script output 这是脚本输出的图像
Tjaart van der Walt's answer did not work for me in the Google Test Tool . Tjaart van der Walt的答案在Google测试工具中对我不起作用。 It did work with the real crawler.
它确实与真正的爬虫一起工作。 So I found another "old-school" solution which did the trick:
所以我找到了另一个“老派”解决方案,它可以解决问题:
HTML HTML
<script type="application/ld+json" id="json-ld-music-group"></script>
Angular 角
var schemaOrg = angular.toJson({
'@context': 'http://schema.org',
'@type': 'MusicGroup',
...
});
angular.element(document).ready(function() {
var jsonLd = angular.element(document.getElementById('json-ld-music-group'))[0];
jsonLd.innerHTML = schemaOrg;
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.