Output JSON-LD with AnugularJS for Structured Data Markup
I ended up using this solution suggested by Tjaart:https://stackoverflow.com/a/35333500/3502352
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 };}]);