with - renderizar html angularjs
AngularJS: Insertar HTML de una cadena (2)
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.
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>
también puede usar $sce.trustAsHtml(''"<h1>" + str + "</h1>"'')
, si desea conocer más detalles, consulte $sce