javascript – AngularJS脚本标记JSON-LD

如何在AngularJS中使用动态构建的 JSON对象创建一个application / ld json脚本标记.

这就是我需要脚本标签的样子

<script type="application/ld+json">
{
  "@context": "http://scheR_562_11845@a.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://scheR_562_11845@a.org","geo": {
      "@type": "GeoCoordinates","longitude": "73.98"
    },"name": "Empire State Building"
  };
}]);

脚本标签中的表达式不执行.
脚本标签之外的表达式正确执行并显示JSON

请参阅jsfiddle

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

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