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

publicado por: Anonymous

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.

_x000D_

_x000D_

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

_x000D_

_x000D_

_x000D_

solución

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.

_x000D_

_x000D_

const html = {_x000D_
  "iframe": "<iframe src='http://thehackernews.com' width='500' height='300'></iframe>"_x000D_
}_x000D_
_x000D_
angular.module('app', [])_x000D_
  .filter('bypass', ['$sce', ($sce) => {_x000D_
    return function(html) {_x000D_
      return $sce.trustAsHtml(html);_x000D_
    };_x000D_
  }])_x000D_
  .controller('htmlController', ['$scope', ($scope) => {_x000D_
      $scope.page = html.iframe;_x000D_
  }]);

_x000D_

<!DOCTYPE html>_x000D_
<html ng-app="app">_x000D_
<head>_x000D_
  <meta charset="utf-8">_x000D_
  <meta name="viewport" content="width=device-width">_x000D_
  <title>JS Bin</title>_x000D_
</head>_x000D_
<body ng-controller="htmlController">_x000D_
_x000D_
 <div ng-bind-html="page | bypass"></div>_x000D_
_x000D_
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>_x000D_
</body>_x000D_
</html>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *