with - renderizar html angularjs

AngularJS: Insertar HTML de una cadena

Question

He buscado mucho para esto, pero o no puedo encontrar la respuesta o no la entiendo. Un ejemplo específico ganará el voto =)

• Tengo una función que devuelve una cadena HTML.
• No puedo cambiar la función.
• Quiero que el html representado por la cadena se inserte en el DOM.
• Me complace utilizar un controlador, una directiva, un servicio o cualquier otra cosa que funcione (y es razonablemente una buena práctica).
• Descargo de responsabilidad: no entiendo $ compilar bien.

Esto es lo que he intentado:

// My magic HTML string function.
function htmlString (str) {
return "<h1>" + str + "</h1>";
}
function Ctrl ($scope, $compile) {
$scope.htmlString = htmlString;
}
Ctrl.$inject = ["$scope", "$compile"];

Eso no funcionó.

Lo probé como una directiva también:

// My magic HTML string function.
function htmlString (str) {
return "<h1>" + str + "</h1>";
}
angular.module("myApp.directives", [])
.directive("htmlString", function () {
return {
restrict: "E",
scope: { content: "@" },
template: "{{ htmlStr(content) }}"
}
});
... and in my HTML ...
<html-string content="foo"></html-string>

¿Ayuda?

Nota

Miré estos, entre otros, pero no pude hacer que funcione.

• AngularJS: Insertar HTML a la vista
• AngularJS $ http HTML Parser
• angularjs - insertando $ compile-d html
• AngularJS no se ejecuta en HTML insertado con document.write ()
• Escape de texto HTML en una directiva AngularJS

Answer 1

Eche un vistazo al ejemplo en este enlace:

http://docs.angularjs.org/api/ngSanitize.$sanitize

Básicamente, angular tiene una directiva para insertar html en páginas. En su caso, puede insertar el html usando la directiva ng-bind-html de la siguiente manera:

Si ya has hecho todo esto:

// My magic HTML string function.
function htmlString (str) {
return "<h1>" + str + "</h1>";
}
function Ctrl ($scope) {
var str = "HELLO!";
$scope.htmlString = htmlString(str);
}
Ctrl.$inject = ["$scope"];

Luego, en su html dentro del alcance de ese controlador, podría

<div ng-bind-html="htmlString"></div>

Answer 2

también puede usar $sce.trustAsHtml(''"<h1>" + str + "</h1>"'') , si desea conocer más detalles, consulte $sce