Pregunta Insertar HTML a la vista


¿Es posible crear un fragmento HTML en un controlador AngularJS y mostrar este HTML en la vista?

Esto proviene de un requisito para convertir un blob JSON inconsistente en una lista anidada de id : value pares. Por lo tanto, el HTML se crea en el controlador y ahora estoy buscando mostrarlo.

He creado una propiedad de modelo, pero no puedo mostrarla en la vista sin solo imprimir el HTML.


Actualizar

Parece que el problema surge del renderizado angular del HTML creado como una cadena entre comillas. Intentará encontrar una forma de evitar esto.

Controlador de ejemplo:

var SomeController = function () {

    this.customHtml = '<ul><li>render me please</li></ul>';
}

Vista de ejemplo:

<div ng:bind="customHtml"></div>

Da :

<div>
    "<ul><li>render me please</li></ul>"
</div>

752
2018-02-21 17:12


origen


Respuestas:


Para Angular 1.x, use ng-bind-html en el HTML:

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

En este punto, obtendrías un attempting to use an unsafe value in a safe context error, por lo que necesita utilizar cualquiera ngSanitize o $ sce para resolver eso.

$ sce

Utilizar $sce.trustAsHtml() en el controlador para convertir la cadena html.

 $scope.thisCanBeusedInsideNgBindHtml = $sce.trustAsHtml(someHtmlVar);

ngSanitize

Hay 2 pasos:

  1. incluir el recurso angular-sanitize.min.js, es decir:
    <script src="lib/angular/angular-sanitize.min.js"></script>

  2. En un archivo js (controlador o usualmente app.js), incluya ngSanitize, es decir:
    angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'ngSanitize'])


1070
2018-06-10 19:39



También puedes crear un filtro como ese:

var app = angular.module("demoApp", ['ngResource']);

app.filter("trust", ['$sce', function($sce) {
  return function(htmlCode){
    return $sce.trustAsHtml(htmlCode);
  }
}]);

Luego en la vista

<div ng-bind-html="trusted_html_variable | trust"></div>

Nota: Este filtro confía en cualquier html que se le haya pasado, y podría presentar una vulnerabilidad XSS si se le pasan variables con la entrada del usuario.


302
2017-08-26 18:52



Angular JS muestra HTML dentro de la etiqueta 

La solución proporcionada en el enlace anterior funcionó para mí, ninguna de las opciones en este hilo lo hizo. Para cualquiera que busque lo mismo con AngularJS versión 1.2.9

Aquí hay una copia:

Ok encontré una solución para esto:

JS:

$scope.renderHtml = function(html_code)
{
    return $sce.trustAsHtml(html_code);
};

HTML:

<p ng-bind-html="renderHtml(value.button)"></p>

EDITAR:

Aquí está la configuración:

Archivo JS:

angular.module('MyModule').controller('MyController', ['$scope', '$http', '$sce',
    function ($scope, $http, $sce) {
        $scope.renderHtml = function (htmlCode) {
            return $sce.trustAsHtml(htmlCode);
        };

        $scope.body = '<div style="width:200px; height:200px; border:1px solid blue;"></div>'; 

    }]);

Archivo HTML:

<div ng-controller="MyController">
    <div ng-bind-html="renderHtml(body)"></div>
</div>

114
2018-03-25 16:25



Afortunadamente, no necesita ningún filtro lujoso o métodos inseguros para evitar ese mensaje de error. Esta es la implementación completa para generar correctamente el marcado HTML en una vista de la manera prevista y segura.

El módulo de desinfección debe incluirse después de Angular:

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-sanitize.js"></script>

Entonces, el módulo debe estar cargado:

angular.module('app', [
  'ngSanitize'
]);

Esto le permitirá incluir marcado en una cadena de un controlador, directiva, etc.

scope.message = "<strong>42</strong> is the <em>answer</em>.";

Finalmente, en una plantilla, se debe generar de la siguiente manera:

<p ng-bind-html="message"></p>

Que producirá el resultado esperado: 42 es el responder.


62
2017-10-16 18:32



Lo he intentado hoy, la única forma que encontré fue esto

<div ng-bind-html-unsafe="expression"></div>


60
2017-07-24 22:49



ng-bind-html-unsafe ya no funciona

Esta es la forma más corta:

Crea un filtro:

myApp.filter('unsafe', function($sce) { return $sce.trustAsHtml; });

Y en su opinión:

<div ng-bind-html="customHtml | unsafe"></div>

PD Este método no requiere que incluya el ngSanitize módulo.


49
2017-08-23 02:45



en html

<div ng-controller="myAppController as myCtrl">

<div ng-bind-html-unsafe="myCtrl.comment.msg"></div>

O

<div ng-bind-html="myCtrl.comment.msg"></div

en el controlador

mySceApp.controller("myAppController", function myAppController( $sce) {

this.myCtrl.comment.msg = $sce.trustAsHtml(html);

funciona también con $scope.comment.msg = $sce.trustAsHtml(html);


24
2017-12-17 17:20



Descubrí que usar ng-sanitize no me permitía agregar ng-click en el html.

Para resolver esto, agregué una directiva. Me gusta esto:

app.directive('htmldiv', function($compile, $parse) {
return {
  restrict: 'E',
  link: function(scope, element, attr) {
    scope.$watch(attr.content, function() {
      element.html($parse(attr.content)(scope));
      $compile(element.contents())(scope);
    }, true);
  }
}
});

Y este es el HTML:

<htmldiv content="theContent"></htmldiv>

Buena suerte.


9
2017-09-22 21:34