javascript - tag - title label html

Insertar HTML en la vista

Question

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

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

He creado una propiedad de modelo, pero no puedo mostrar esto en la vista sin que solo se 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 manera de evitar esto.

Ejemplo de controlador:

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>

Answer 1

A partir de Angular 4, esta es la forma en que ahora funciona:

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

Tomado de esta pregunta here.

Answer 2

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 formato HTML en una vista de la forma deseada 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 ser cargado:

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

Esto le permitirá incluir el marcado en una cadena desde un controlador, directiva, etc.:

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

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

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

Que producirá el resultado esperado: 42 es la respuesta .

Answer 3

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 un filtro al ng-bind-html como

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

y gracias a Ruben Decrop

Answer 4

Aquí hay una simple (e insegura) directiva de bind-as-html , 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á por problemas de seguridad, si se vincula contenido no confiable.

Utilizar como tal:

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

Answer 5

Descubrí que el uso de 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.

Answer 6

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

1.Crated 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. Registrar la tubería a app.module.ts

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

3. Utilizar en su plantilla

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

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

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

Answer 7

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

producto-specs.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

Answer 8

He intentado hoy, la única manera que encontré fue esta

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

Answer 9

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() con element.replaceWith()

Answer 10

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

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

En este punto, obtendría un attempting to use an unsafe value in a safe context error de attempting to use an unsafe value in a safe context por lo que necesita 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 normalmente app.js), incluya ngSanitize, es decir:
   angular.module(''myApp'', [''myApp.filters'', ''myApp.services'', ''myApp.directives'', ''ngSanitize''])

Answer 11

Simplemente hice 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.

Answer 12

También puedes crear un filtro así:

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 pasados ​​a él, y podría presentar una vulnerabilidad XSS si se le pasan variables con la entrada del usuario.

Answer 13

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.

Answer 14

Utilizar

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

y

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

Para eso, necesita 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>

Answer 15

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

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

Answer 16

Angular JS muestra HTML dentro de la etiqueta

La solución provista en el enlace anterior funcionó para mí, ninguna de las opciones en este hilo funcionó. Para quienes buscan lo mismo con AngularJS versión 1.2.9.

Aquí hay una copia:

Ok encontré 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>

Answer 17

ng-bind-html-unsafe ya no funciona.

Este es el camino más corto:

Crear un filtro:

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

Y en su opinión:

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

PS Este método no requiere que incluyas el módulo ngSanitize .