1

El contenido HTML de mi página está compuesto por archivos JSON, todas las etiquetas se muestran correctamente, como las <h1>, <p>, <img>, etc... Pero etiquetas como <iframe>, <video>, audio, etc... No se muestran, eh investigado en la página de AngularJS y con el servicio $sce se puede resolver, dice por ejemplo que con $sce.RESOURCE_URL se muestran correctamente dichas etiquetas. El problema es que no se cómo implementarlo, le agradecería mucho a quien pudiera darme un ejemplo que tenga todo lo necesario para que se muestre cualquier contenido HTML correctamente y no tener que preocuparme si alguna etiqueta se va a mostrar o no correctamente.

Este es un ejemplo de la página de AngularJS, pero no dice cómo implementar el $sce.RESOURCE_URL, estuve leyendo pero no entiendo muy bien.

app.controller('AppController', ['$http', '$templateCache', '$sce',
  function AppController($http, $templateCache, $sce) {
    var self = this;
    $http.get('test_data.json', {cache: $templateCache}).success(function(userComments) {
      self.userComments = userComments;
    });
  }]);

1 respuesta 1

3

Puedes identificar un código HTML con dichas etiquetas como "seguro" explicitamente usando $sce.trustAsHtml. Sería más sencillo implementar un filtro para ello.

const html = {
  "iframe": "<iframe src='http://thehackernews.com' width='500' height='300'></iframe>"
}

angular.module('app', [])
  .filter('bypass', ['$sce', ($sce) => {
    return function(html) {
      return $sce.trustAsHtml(html);
    };
  }])
  .controller('htmlController', ['$scope', ($scope) => {
      $scope.page = html.iframe;
  }]);
<!DOCTYPE html>
<html ng-app="app">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body ng-controller="htmlController">

 <div ng-bind-html="page | bypass"></div>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
</body>
</html>

2
  • Eh implementado el filtro de esta manera: app.filter('filterHtml', ['$sce', function($sce){ return function(content){ return $sce.trustAsHtml(content); }; }]);. Le puse content porque mi ng-bind-html lo tengo así ng-bind-html="item.content", entonces quedaría así con el filtro ng-bind-html="item.content | filterHtml" y me a funcionado correctamente, solo quería saber si de esta forma está bien implementado? Commented el 30 sept. 2016 a las 3:58
  • Sí, Es correcto.
    – gugadev
    Commented el 30 sept. 2016 a las 12:03

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.