Inserire HTML in vista dal controller AngularJS

Question

È possibile creare un frammento di HTML in un controller AngularJS e avere questo HTML mostrato nella vista?

Questo deriva da un requisito per trasformare un incoerente JSON BLOB in un elenco nidificato di id : value coppie. Pertanto l'HTML è creato nel controller e ora sto cercando di visualizzarlo.

Ho creato una proprietà del modello, ma non riesco a renderlo nella vista senza che stampando l'HTML.

---

Aggiornare

Sembra che il problema derivi dal rendering angolare dell'HTML creato come stringa all'interno delle citazioni. Tenterò di trovare un modo per aggirare questo.

Controller di esempio:

var SomeController = function () {

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

Visualizza esempio:

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

Dà:

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

Answer 1

Per angolare 1.x, usa ng-bind-html In HTML:

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

A questo punto otterresti un attempting to use an unsafe value in a safe context errore quindi è necessario utilizzare ngsanitizzare o $ sce Per risolverlo.

$ sce

Uso $sce.trustAsHtml() Nel controller per convertire la stringa HTML.

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

ngsanitizzare

Ci sono 2 passaggi:

1. Includi la risorsa Angular-sanitize.min.js, cioè:
   <script src="lib/angular/angular-sanitize.min.js"></script>

2. In un file JS (controller o di solito app.js), include ngsanitize, cioè:
   angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'ngSanitize'])

Answer 2

Puoi anche creare un filtro come così:

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

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

Quindi nella vista

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

Nota: Questo filtro si fida di qualsiasi HTML passato ad esso e potrebbe presentare una vulnerabilità XSS se le variabili con l'input dell'utente vengono passate ad esso.

Answer 3

Angular JS mostra HTML all'interno del tag

La soluzione fornita nel link sopra ha funzionato per me, nessuna delle opzioni su questo thread ha fatto. Per chiunque cerchi la stessa cosa con AngularJS versione 1.2.9

Ecco una copia:

Ok ho trovato una soluzione per questo:

JS:

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

Html:

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

MODIFICARE:

Ecco il set up:

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

    }]);

File html:

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

Answer 4

Fortunatamente, non hai bisogno di filtri fantasiosi o metodi non sicuri per evitare quel messaggio di errore. Questa è l'implementazione completa per emettere correttamente il markup HTML in una vista nel modo previsto e sicuro.

Il modulo sanitizzato deve essere incluso dopo l'angolare:

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

Quindi, il modulo deve essere caricato:

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

Ciò ti consentirà di includere il markup in una stringa da un controller, direttiva, ecc.

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

Infine, in un modello, deve essere emesso così:

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

Che produrrà l'output previsto: 42 è il Rispondere.

Answer 5

Ho provato oggi, l'unico modo che ho trovato è stato questo

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

Answer 6

ng-bind-html-unsafe non lavora più.

Questo è il modo più breve:

Crea un filtro:

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

E a tuo avviso:

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

PS Questo metodo non richiede di includere il ngSanitize modulo.

Answer 7

su 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

su controller

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

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

funziona anche con $scope.comment.msg = $sce.trustAsHtml(html);

Answer 8

Ho scoperto che l'uso di NG-sanitize non mi ha permesso di aggiungere NG-clic nell'HTML.

Per risolvere questo ho aggiunto una direttiva. Come questo:

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 questo è l'HTML:

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

Buona fortuna.

Answer 9

Ho appena fatto questo usando ngbindhtml seguendo Documenti angolari (v1.4),

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

Assicurati di includere NGSanitizza nelle dipendenze del modulo. Quindi dovrebbe funzionare bene.

Answer 10

Un'altra soluzione, molto simile a quella di BLRBR, tranne l'uso di un attributo con ambito è:

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

Poi

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

Nota È possibile sostituire element.append() insieme a element.replaceWith()

Answer 11

C'è un'altra soluzione per questo problema usando la creazione di nuovi attributo o direttive in angolare.

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>

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 12

Puoi anche usare Ng-Include.

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

Puoi usare "ng-show" Per mostrare nascondere questi dati del modello.

Answer 13

Uso

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

e

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

Per questo, devi includere angular-sanitize.js, ad esempio nel tuo file html con

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

Answer 14

Ecco la soluzione che crea un filtro come questo

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

e applica questo come filtro su NG-Bind-HTML come

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

E grazie a Ruben DECOP

Answer 15

Ecco un semplice (e non sicuro) bind-as-html direttiva, senza la necessità di ngSanitize:

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

Si noti che ciò si aprirà per problemi di sicurezza, se vincolando contenuti non attendibili.

Usa così:

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

Answer 16

Esempio di lavoro con il tubo per visualizzare HTML nel modello con Angular 4.

1.Pubi cratati 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. Registra il tubo su app.module.ts

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

3. Usa nel tuo modello

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

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

   Si prega di aggiungere un'implementazione appropriata per getdivhtml nel file componente.ts associato.

Answer 17

Solo semplice uso [innerHTML], come sotto:

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

Prima che tu dovessi usare ng-bind-html...

Answer 18

In Angular 7 + Ionic 4, il contenuto di HTML può essere mostrato usando [Innerhtml]:

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

Spero che questo ti aiuterà anche. Grazie.