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 proviene de un requisito para convertir un blob JSON inconsistente en una lista anidada de id: valuepares. Por lo tanto, el HTML se crea en el controlador y ahora estoy buscando mostrarlo.

He creado una propiedad de modelo, pero no puedo representarla en la vista sin que solo imprima el HTML .

Actualizar

Parece que el problema surge de la representación 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>

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

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

En este punto, obtendría un attempting to use an unsafe value in a safe contexterror, por lo que debe usar ngSanitize o $ sce para resolverlo.

$ sce

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

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

ngSanitize

Hay 2 pasos:

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

2. 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 puede crear un filtro así:

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

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

Entonces 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 la 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 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>

Afortunadamente, no necesita filtros sofisticados 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>

Luego, el módulo debe cargarse:

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

Esto le permitirá incluir marcas en una cadena desde 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 he intentado hoy, la única forma en que encontré fue esto

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

ng-bind-html-unsafe Ya no funciona.

Este es el camino más corto:

Crea un filtro:

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

Y en tu opinión:

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

PD: este método no requiere que incluyas el ngSanitizemódulo.

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);

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

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.

Acabo de hacer esto usando ngBindHtml siguiendo los documentos angulares (v1.4) ,

<div ng-bind-html="expression"></div> 
and expression can be "<ul><li>render me please</li></ul>"

Asegúrese de incluir ngSanitize en las dependencias del módulo. Entonces debería funcionar bien.

Otra solución, muy similar a la de blrbr, excepto que usa un atributo de ámbito es:

angular.module('app')
.directive('renderHtml', ['$compile', function ($compile) {
    return {
      restrict: 'E',
      scope: {
        html: '='
      },
      link: function postLink(scope, element, attrs) {

          function appendHtml() {
              if(scope.html) {
                  var newElement = angular.element(scope.html);
                  $compile(newElement)(scope);
                  element.append(newElement);
              }
          }

          scope.$watch(function() { return scope.html }, appendHtml);
      }
    };
  }]);

Y entonces

<render-html html="htmlAsString"></render-html>

Tenga en cuenta que puede reemplazar element.append()conelement.replaceWith()

Hay una solución más para este problema mediante la creación de nuevos atributos o directivas en angular.

especificaciones del producto.html

 <h4>Specs</h4>
        <ul class="list-unstyled">
          <li>
            <strong>Shine</strong>
            : {{product.shine}}</li>
          <li>
            <strong>Faces</strong>
            : {{product.faces}}</li>
          <li>
            <strong>Rarity</strong>
            : {{product.rarity}}</li>
          <li>
            <strong>Color</strong>
            : {{product.color}}</li>
        </ul>

app.js

 (function() {
var app = angular.module('gemStore', []);    
app.directive("     <div ng-show="tab.isSet(2)" product-specs>", function() {
return {
  restrict: 'E',
  templateUrl: "product-specs.html"
};
});

index.html

 <div>
 <product-specs>  </product-specs>//it will load product-specs.html file here.
 </div>

o

<div  product-specs>//it will add product-specs.html file 

o

<div ng-include="product-description.html"></div>

https://docs.angularjs.org/guide/directive

También puedes usar ng-include .

<div class="col-sm-9 TabContent_container" ng-include="template/custom.html">
</div>

puede usar "ng-show" para mostrar ocultar los datos de esta plantilla.

aquí está la solución hacer un filtro como este

.filter('trusted',
   function($sce) {
     return function(ss) {
       return $sce.trustAsHtml(ss)
     };
   }
)

y aplique esto como filtro al ng-bind-html como

<div ng-bind-html="code | trusted">

y gracias a Ruben Decrop

Utilizar

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

y

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

Para eso, debe incluir angular-sanitize.js, por ejemplo, en su archivo html con

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

Aquí hay una bind-as-htmldirectiva simple (e insegura) , sin la necesidad de ngSanitize:

myModule.directive('bindAsHtml', function () {
    return {
        link: function (scope, element, attributes) {
            element.html(scope.$eval(attributes.bindAsHtml));
        }
    };
});

Tenga en cuenta que esto se abrirá para problemas de seguridad, si vincula contenido no confiable.

Use así:

<div bind-as-html="someHtmlInScope"></div>

Ejemplo de trabajo con tubería para mostrar html en plantilla con Angular 4.

1.Crate Pipe escape-html.pipe.ts

``

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Pipe({name : 'keepHtml', pure : false})
export class EscapeHtmlPipe implements PipeTransform{
 constructor(private sanitizer : DomSanitizer){
 }
 transform(content){
  return this.sanitizer.bypassSecurityTrustHtml(content);
 }
}

`2. Registre la tubería en app.module.ts

 import {EscapeHtmlPipe} from './components/pipes/escape-html.pipe';
    declarations: [...,EscapeHtmlPipe]

3. Úselo en su plantilla

       <div class="demoPipe"  [innerHtml]="getDivHtml(obj.header) | keepHtml">

   Ejecutar fragmento de códigoOcultar resultados

   Expandir fragmento

4. getDivHtml() { //can return html as per requirement}

   Agregue la implementación adecuada para getDivHtml en el archivo component.ts asociado.

Solo uso simple [innerHTML], como a continuación:

<div [innerHTML]="htmlString"></div>

Antes de que necesitaras usar ng-bind-html...

En Angular 7 + ionic 4, los contenidos HTML se pueden mostrar usando "[innerHTML]":

<div [innerHTML]="htmlContent"></div>

Espero que esto también te ayude. Gracias.