¿Cómo mostrar cualquier contenido HTML con ng-bind-html y $sce? – javascript angularjs json

Pregunta:


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;
    });
  }]);
Preguntado por: adrianojosue

Guz

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>

Fuente

Add a Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *