Índice

Insertar contenido HTML

En ciertas aplicaciones, puede resultar útil vincular contenido HTML para poder integrarlo en una página. Por ejemplo, en el escenario en que la aplicación represente un blog, si cada artículo se almacena como contenido HTML, será necesario vincular este contenido para mostrarlo.

La directiva ng-bind permite vincular una cadena de caracteres, pero no permite interpretar contenido HTML.

$scope.content = "<p>Soy contenido <em>HTML</em></p>";

La propiedad content del scope contiene contenido HTML.

<div data-ng-bind="content"></div>

La vista utiliza la directiva ngBind para mostrar el contenido de la propiedad content.

images/C10EI11.png

Cuando se visualiza la página, el contenido se muestra como una cadena de caracteres, y no se interpreta en el navegador.

Para poder insertar HTML, existe el mecanismo sanitize, provisto por el módulo ngSanitize. Para poder utilizarlo, hay que hacer referencia al script angular-sanitize.js y, a continuación, declarar una dependencia desde el módulo principal hacia el módulo ngSanitize.

<script src="angular-sanitize.js">

 

angular.module(’miApp’, [’ngSanitize’]);

El módulo ngSanitize contiene la directiva ngBindHtml, que permite, a partir de una propiedad del modelo que contenga código HTML, inyectar este código HTML.

<div data-ng-bind-html="content"></div>

La vista se ha modificado para utilizar la directiva ngBindHtml.

images/C10EI12.png

Cuando ...