write with renderizar from html string angularjs

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