Inserir HTML na visualização do controlador AngularJS

É possível criar um fragmento HTML em um controlador AngularJS e ter esse HTML mostrado na exibição?

Isso vem de um requisito para transformar um blob JSON inconsistente em uma lista aninhada de id: valuepares. Portanto, o HTML é criado no controlador e agora estou procurando exibi-lo.

Eu criei uma propriedade de modelo, mas não posso renderizá-la na exibição sem apenas imprimir o HTML .

Atualizar

Parece que o problema surge da renderização angular do HTML criado como uma string entre aspas. Tentará encontrar uma maneira de contornar isso.

Controlador de exemplo:

var SomeController = function () {

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

Exemplo de visualização:

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

Dá:

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

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

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

Nesse ponto, você receberá um attempting to use an unsafe value in a safe contexterro, portanto, você deve usar ngSanitize ou $ sce para resolver isso.

$ sce

Usar $sce.trustAsHtml() no controlador para converter a string html.

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

ngSanitize

Existem 2 etapas:

1. inclua o recurso angular-sanitize.min.js, ou seja:
   <script src="lib/angular/angular-sanitize.min.js"></script>

2. Em um arquivo js (controller ou geralmente app.js), inclua ngSanitize, ou seja:
   angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'ngSanitize'])

Você também pode criar um filtro assim:

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

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

Então na vista

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

Nota : Este filtro confia em todo e qualquer html passado a ele e pode apresentar uma vulnerabilidade XSS se as variáveis ​​com entrada do usuário forem passadas para ele.

JS angular mostra HTML dentro da tag

A solução fornecida no link acima funcionou para mim, nenhuma das opções deste segmento funcionou. Para quem procura a mesma coisa com a versão 1.2.9 do AngularJS

Aqui está uma cópia:

Ok, eu encontrei solução para isso:

JS:

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

HTML:

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

EDITAR:

Aqui está a configuração:

Arquivo 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>'; 

    }]);

Arquivo HTML:

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

Felizmente, você não precisa de filtros sofisticados ou métodos não seguros para evitar essa mensagem de erro. Esta é a implementação completa para exibir corretamente a marcação HTML em uma exibição da maneira pretendida e segura.

O módulo de higienização deve ser incluído após o 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>

Em seguida, o módulo deve ser carregado:

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

Isso permitirá que você inclua a marcação em uma string de um controlador, diretiva, etc:

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

Finalmente, em um modelo, ele deve ser produzido da seguinte maneira:

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

O que produzirá a saída esperada: 42 é a resposta .

Eu tentei hoje, a única maneira que encontrei foi essa

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

ng-bind-html-unsafe não funciona mais.

Esta é a maneira mais curta:

Crie um filtro:

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

E na sua opinião:

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

PS Este método não requer que você inclua o ngSanitizemódulo.

em html

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

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

OU

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

no controlador

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

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

trabalha também com $scope.comment.msg = $sce.trustAsHtml(html);

Eu descobri que o uso do ng-sanitize não me permitia adicionar o ng-click no html.

Para resolver isso, adicionei uma diretiva. Como isso:

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

E este é o HTML:

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

Boa sorte.

Fiz isso usando ngBindHtml seguindo documentos angulares (v1.4) ,

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

Certifique-se de incluir ngSanitize nas dependências do módulo. Então deve funcionar bem.

Outra solução, muito semelhante à do blrbr, exceto pelo uso de um atributo com escopo, é:

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

E depois

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

Observe que você pode substituir element.append()porelement.replaceWith()

existe mais uma solução para esse problema usando a criação de novos atributos ou diretivas em angular.

product-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>

ou

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

ou

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

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

você também pode usar ng-include .

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

você pode usar "ng-show" para mostrar ocultar os dados deste modelo.

aqui está a solução faça um filtro como este

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

e aplique isso como um filtro ao ng-bind-html, como

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

e obrigado a Ruben Decrop

Usar

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

e

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

Para isso, é necessário incluir angular-sanitize.js, por exemplo, no seu arquivo html com

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

Aqui está uma bind-as-htmldiretiva simples (e insegura) , sem a necessidade de ngSanitize:

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

Observe que isso será aberto para problemas de segurança, se vincular conteúdo não confiável.

Use assim:

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

Exemplo de trabalho com pipe para exibir html no modelo com Angular 4.

1.Caneta Criada 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 o pipe no app.module.ts

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

3. Use no seu modelo

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

   Executar snippet de códigoOcultar resultados

   Expandir snippet

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

   Adicione a implementação apropriada para getDivHtml no arquivo component.ts associado.

Apenas uso simples [innerHTML], como abaixo:

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

Antes de você precisar usar ng-bind-html...

No Angular 7 + iônico 4, o conteúdo em HTML pode ser mostrado usando "[innerHTML]":

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

Espero que isso também ajude você. Obrigado.