Javascript AngularJS脚本标记JSON-LD

如何使用AngularJS中动态构建的json对象创建

应用程序/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>

脚本标记内的表达式不执行。 脚本标记外的表达式正确执行并显示JSON

---

请看

喝了一杯咖啡后，我记得有一个

$sce

服务，带有

信任TML

功能

我创建了一个接受

json

参数的指令，以便于重用

请参阅下面的更新和工作代码：

HTML

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

var myApp=angular.module（'application'，[]）；
myApp.controller（'TestController'，['$scope'，函数（$scope）{
$scope.jsonId={
“@context”：”http://schema.org",
“@type”：“Place”，
“geo”：{
“@type”：“地理坐标”，
“纬度”：“40.75”，
“经度”：“73.98”
},
“名称”：“帝国大厦”
};
}]).directive（'jsonld'，['$filter'，'$sce'，function（$filter，$sce）{
返回{
限制：'E'，
模板：函数（）{
返回“”；
},
范围：{
json:'=json'
},
链接：函数（范围、元素、属性）{
scope.onGetJson=函数（）{
返回$sce.trustAsHtml（$filter（'json'）（scope.json））；
}
},
替换：正确
};
}]);

下面是脚本输出的图像

请参阅更新的

---

特贾尔特·范德沃尔特的回答在当时对我不起作用。它确实和真正的爬虫一起工作。 因此，我找到了另一个“老派”解决方案：

HTML

---

您如何判断它是否执行？它只是一个anon对象…@dandavis

json

是一个输出json对象的过滤器。如果您查看源代码，脚本标记之间没有JSON对象。正如您所述，我们在“真实案例场景”中使用此解决方案时，我不赞成。请点击下面的链接，这将启动googles结构数据测试工具，并在我的回答中使用示例JSFIDLE。您将看到在右侧检测到位置。忽略这些错误，因为这是jsfiddle网站数据，而不是示例jsfiddle。您确定没有尝试测试本地主机网站吗？您是对的。它毕竟起了作用。谷歌延迟了5天处理结果。对我来说，它在谷歌测试工具中根本不起作用。我编辑了我之前的评论。我如何在Angularjs 2中实现同样的效果。@ArvindChavhan如果脚本标记位于模板html中，则angular2中的脚本标记似乎已被删除，下面是一个有关此问题的问题。这是指向Tjaart van der Walt Hi的bug/feature request的链接，抱歉，我的问题可能听起来很愚蠢，但我有一个应用程序，它可以懒洋洋地加载一些作业。我是否必须将所有作业都包含在脚本中才能工作？@MohamedMahmoud如果您需要所有作业都显示在JSON-LD标记中，那么是的，您需要将它们全部包含在JSON输出中。我宁愿在script标记中显示最新的作业，或者让script标记显示页面在初始加载时显示的相同初始数据。这样，您就不会用太多的数据滥用标记。

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

<div ng-controller="TestController">
  <jsonld data-json="jsonId"></jsonld>
</div>

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

<script type="application/ld+json" id="json-ld-music-group"></script>

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