Inserte HTML en la vista desde el controlador AngularJS
¿Es posible crear un fragmento HTML en un controlador AngularJS y mostrar este HTML en la vista?
Esto surge del requisito de convertir un blob JSON incoherente en una lista anidada de id: valuepares. Por lo tanto, el HTML se crea en el controlador y ahora busco mostrarlo.
He creado una propiedad de modelo, pero no puedo representarla en la vista sin simplemente imprimir el HTML .
Actualizar
Parece que el problema surge de la representación angular del HTML creado como una cadena entre comillas. Intentaremos encontrar una manera 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>
Para Angular 1.x, use ng-bind-htmlen HTML:
<div ng-bind-html="thisCanBeusedInsideNgBindHtml"></div>
En este punto, recibirá un attempting to use an unsafe value in a safe contexterror, por lo que deberá usar ngSanitize o $sce para resolverlo.
$ce
Úselo $sce.trustAsHtml()en el controlador para convertir la cadena html.
$scope.thisCanBeusedInsideNgBindHtml = $sce.trustAsHtml(someHtmlVar);
ngDesinfectar
Hay 2 pasos:
incluya el recurso angular-sanitize.min.js, es decir:
<script src="lib/angular/angular-sanitize.min.js"></script>En un archivo js (controlador o generalmente app.js), incluya ngSanitize, es decir:
angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'ngSanitize'])
También puedes crear un filtro como este:
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 todos y cada uno de los HTML que se le pasan y podría presentar una vulnerabilidad XSS si se le pasan variables con entrada del usuario.
Angular JS muestra HTML dentro de la etiqueta
La solución proporcionada en el enlace anterior funcionó para mí, ninguna de las opciones de este hilo funcionó. 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>
Afortunadamente, no necesita filtros sofisticados ni 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 forma prevista y segura.
El módulo sanitize 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>
Luego se debe cargar el módulo:
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 así:
<p ng-bind-html="message"></p>
Lo que producirá el resultado esperado: 42 es la respuesta .
Lo intenté hoy, la única forma que encontré fue esta.
<div ng-bind-html-unsafe="expression"></div>
