Tag script AngularJS JSON-LD

Question

Come si crea un tag script con un oggetto JSON creato dinamicamente in AngularJS.

Questo è quello che mi serve il tag script per assomigliare

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

Ho provato il seguente codice, ma non posso farlo funzionare:

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

L'espressione all'interno del tag dello script non viene eseguita. L'espressione di fuori del tag script viene eseguito correttamente e viene visualizzato il JSON

Vedere jsfiddle

Answer 1

Dopo una tazza di caffè mi sono ricordato v'è un servizio $sce con una funzione trustAsHtml.

ho creato una direttiva che accetta un parametro json per un facile riutilizzo

Si prega di consultare aggiornato e il codice di lavoro di seguito:

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

Ecco un'immagine dell'output dello script

Si prega di consultare aggiornato jsfiddle

Answer 2

Tjaart van der risposta di Walt non ha funzionato per me in Google Test Tool. Funzionava con il vero crawler. così ho trovato un'altra soluzione "vecchia scuola", che ha fatto il trucco:

HTML

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

angolare

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