Inserisci HTML in vista dal controller AngularJS

È possibile creare un frammento HTML in un controller AngularJS e mostrare questo HTML nella vista?

Ciò deriva dall'obbligo di trasformare un BLOB JSON incoerente in un elenco nidificato di id: valuecoppie. Pertanto, l' HTML viene creato nel controller e ora sto cercando di visualizzarlo.

Ho creato una proprietà del modello, ma non posso renderlo nella vista senza che stampi semplicemente l' HTML .

Aggiornare

Sembra che il problema derivi dal rendering angolare dell'HTML creato come stringa tra virgolette. Tenterà di trovare un modo per aggirare questo.

Esempio di controller:

var SomeController = function () {

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

Vista di esempio:

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

Dà:

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

Per Angular 1.x, utilizzare ng-bind-htmlin HTML:

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

A questo punto si otterrebbe un attempting to use an unsafe value in a safe contexterrore, quindi è necessario utilizzare ngSanitize o $ sce per risolverlo.

$ sce

Utilizzare $sce.trustAsHtml()nel controller per convertire la stringa html.

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

ngSanitize

Ci sono 2 passaggi:

1. include la risorsa angular-sanitize.min.js, ovvero:
   <script src="lib/angular/angular-sanitize.min.js"></script>

2. In un file js (controller o di solito app.js), includere ngSanitize, ovvero:
   angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'ngSanitize'])

Puoi anche creare un filtro in questo modo:

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 tutti gli html trasmessi e potrebbe presentare una vulnerabilità XSS se gli vengono passate variabili con input dell'utente.

JS angolare mostra HTML all'interno del tag

La soluzione fornita nel link sopra ha funzionato per me, nessuna delle opzioni su questo thread ha funzionato. Per tutti coloro che cercano la stessa cosa con AngularJS versione 1.2.9

Ecco una copia:

Ok ho trovato la 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 la configurazione:

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>

Fortunatamente, non è necessario alcun filtro di fantasia o metodi non sicuri per evitare quel messaggio di errore. Questa è l'implementazione completa per l'output corretto del markup HTML in una vista nel modo previsto e sicuro.

Il modulo di sanificazione deve essere incluso dopo 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 prodotto in questo modo:

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

Il che produrrà il risultato atteso: 42 è la risposta .

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

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

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

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

sul controller

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

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

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

Ho scoperto che l'uso di ng-sanitize non mi ha permesso di aggiungere ng-click 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>

In bocca al lupo.

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 ngSanitize nelle dipendenze del modulo. Quindi dovrebbe funzionare bene.

Un'altra soluzione, molto simile a quella di blrbr, tranne per 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);
      }
    };
  }]);

E poi

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

Nota che è possibile sostituire element.append()conelement.replaceWith()

esiste un'altra soluzione per questo problema utilizzando la creazione di nuovi attributi 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

puoi anche usare ng-include .

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

puoi usare "ng-show" per mostrare nascondi i dati di questo modello.

ecco la soluzione crea un filtro come questo

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

e applicalo come filtro a ng-bind-html come

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

e grazie a Ruben Decrop

Uso

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

e

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

Per questo, è necessario includere angular-sanitize.js, ad esempio, nel file html con

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

Ecco una bind-as-htmldirettiva semplice (e non sicura) , 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 si associa il contenuto non attendibile.

Usa così:

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

Esempio di funzionamento con pipe per visualizzare HTML nel modello 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. Registrare pipe 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">

   Esegui snippet di codiceNascondi risultati

   Espandi frammento

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

   Aggiungi l'implementazione appropriata per getDivHtml nel file component.ts associato.

Solo un semplice utilizzo [innerHTML], come di seguito:

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

Prima di dover usare ng-bind-html...

In Angular 7 + ionic 4, i contenuti HTML possono essere mostrati usando "[innerHTML]":

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

Spero che questo ti possa aiutare. Grazie.