javascript - strings - module controller angularjs

Etiqueta de script AngularJS JSON-LD

Question

¿Cómo se crea una etiqueta de script application/ld+json con un objeto JSON creado dinámicamente en AngularJS?

Esto es lo que necesito para que se vea la etiqueta del script

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

He intentado el siguiente código pero no puedo hacerlo funcionar:

HTML

<div ng-controller="TestController">
  <script type="application/ld+json">
    {{jsonId|json}}
  </script>
  {{jsonId|json}}
</div>

Controlador

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

La expresión dentro de la etiqueta de script no se ejecuta. La expresión fuera de la etiqueta de script se ejecuta correctamente y muestra el JSON

Por favor vea jsfiddle

Answer 1

Después de una taza de café recordé que hay un servicio de $sce con una función trustAsHtml .

He creado una directiva que acepta un parámetro json para una fácil reutilización

Por favor, consulte el código actualizado y de trabajo a continuación:

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

Aquí hay una imagen de la salida del script.

Por favor, ver actualizado jsfiddle

Answer 2

La respuesta de Tjaart van der Walt no me funcionó en la herramienta de prueba de Google . Funcionó con el verdadero rastreador. Así que encontré otra solución "de la vieja escuela" que hizo el truco:

HTML

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

Angular

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