javascript - span - tr tag html attributes




Inserisci HTML in vista (12)

A partire da Angular 4, questo è il modo in cui ora funziona:

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

Tratto da questa domanda here.

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

Ciò deriva dall'esigenza di trasformare un blob JSON incoerente in un elenco annidato di coppie id : value . Pertanto l'HTML è stato creato nel controller e ora sto cercando di visualizzarlo.

Ho creato una proprietà del modello, ma non posso renderla nella vista senza che sia sufficiente stampare l'HTML.

Aggiornare

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

Controller di esempio:

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>

Ecco una semplice (e non sicura) direttiva bind-as-html , senza bisogno di ngSanitize :

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

Si noti che questo si aprirà per problemi di sicurezza, se il contenuto non è vincolante.

Utilizzare in questo modo:

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

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

Il modulo igienizzante 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, una 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>

Quale produrrà l'output atteso: 42 è la risposta .


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

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


L'ho appena fatto usando ngBindHtml seguendo i 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.


Per 1.x angolare, utilizzare ng-bind-html nel codice HTML:

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

A questo punto si otterrebbe un attempting to use an unsafe value in a safe context errore di attempting to use an unsafe value in a safe context 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 solitamente app.js), includere ngSanitize, ad esempio:
    angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'ngSanitize'])


Un'altra soluzione, molto simile a quella di blrbr eccetto l'uso di un attributo scope, è:

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


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 la soluzione per fare un filtro come questo

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

e applicare questo come un filtro al ng-bind-html come

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

e grazie a Ruben Decrop


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 i dati di questo modello.


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

ng-bind-html-unsafe non funziona 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 modulo ngSanitize .





html-sanitizing