AngularJSスクリプトタグJSON-LD

Question

application/ld+jsonscriptタグを、AngularJSで動的に作成された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", 
    "@type": "Place", 
    "geo": { 
     "@type": "GeoCoordinates", 
     "latitude": "40.75", 
     "longitude": "73.98" 
    }, 
    "name": "Empire State Building" 
    }; 
}]); 

scriptタグ内の式は実行されません。 スクリプトタグ外の表現が正しく実行され、JSON

私はtrustAsHtml機能付き$sceサービスがあります覚えてコーヒーカップ後jsfiddle

Answer 1

を参照してくださいが表示されます。

HTML

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

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

：

は私が

更新され、以下の作業のコードを参照してくださいを簡単に再利用のためのjsonパラメータを受け入れるディレクティブを作成しましたここにスクリプト出力の画像があります

更新jsfiddle

Answer 2

Tjaartのファンデウォルトの答えはGoogle Test Toolに私のために動作しませんでした参照してください。それは実際のクローラで動作しました。 だから私はトリックをした別の「古い学校」解決策が見つかりました：それは実行されるかどう

HTML

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