Znacznik skryptu AngularJS JSON-LD

Question

Jak utworzyć znacznik application/ld+jsonscript za pomocą dynamicznie budowanego obiektu JSON w AngularJS.

To co muszę tag skryptu wyglądać

<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> 

Próbowałem poniższy kod, ale nie mogę zmusić go do pracy:

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

Wyrażenie wewnątrz znacznika skryptu nie jest wykonywane. Wyrażenie poza tagu skrypt wykonuje poprawnie i wyświetla JSON

proszę zobaczyć jsfiddle

Answer 1

Po filiżance kawy pamiętałem jest $sce obsługa z trustAsHtml funkcji.

stworzyłem dyrektywę, która przyjmuje parametr json do łatwego ponownego wykorzystania

proszę zobaczyć aktualizowane i kod działa poniżej:

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

Oto obraz wyjściowego skryptu

proszę zobaczyć zaktualizowane jsfiddle

Answer 2

Tjaart van der odpowiedź Walta nie działa na mnie w Google Test Tool. Działa z prawdziwym robotem. Więc znalazłem kolejny "old-school" rozwiązanie, które wystarczyły:

HTML

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

kątowa

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