Fügen Sie HTML vom AngularJS-Controller in die Ansicht ein

Ist es möglich, ein HTML- Fragment in einem AngularJS-Controller zu erstellen und dieses HTML in der Ansicht anzuzeigen?

Dies ergibt sich aus der Anforderung, einen inkonsistenten JSON-Blob in eine verschachtelte Liste von id: valuePaaren umzuwandeln. Daher wird der HTML- Code im Controller erstellt und ich möchte ihn jetzt anzeigen.

Ich habe eine Modelleigenschaft erstellt, kann diese jedoch nicht in der Ansicht rendern, ohne nur den HTML- Code zu drucken .

Aktualisieren

Es scheint, dass das Problem durch das eckige Rendern des erstellten HTML-Codes als Zeichenfolge in Anführungszeichen entsteht. Ich werde versuchen, einen Weg zu finden, um dies zu umgehen.

Beispielsteuerung:

var SomeController = function () {

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

Beispielansicht:

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

Gibt:

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

Verwenden Sie für Angular 1.x ng-bind-htmlim HTML:

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

Zu diesem Zeitpunkt wird eine attempting to use an unsafe value in a safe contextFehlermeldung angezeigt , sodass Sie entweder ngSanitize oder $ sce verwenden müssen , um dies zu beheben.

$ sce

Verwenden Sie $sce.trustAsHtml()im Controller, um die HTML-Zeichenfolge zu konvertieren.

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

ngSanitize

Es gibt 2 Schritte:

1. Fügen Sie die Ressource angle-sanitize.min.js hinzu, dh:
   <script src="lib/angular/angular-sanitize.min.js"></script>

2. Fügen Sie in eine js-Datei (Controller oder normalerweise app.js) ngSanitize ein, dh:
   angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'ngSanitize'])

Sie können auch einen Filter wie folgt erstellen:

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

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

Dann in der Ansicht

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

Hinweis : Dieser Filter vertraut allen an ihn übergebenen HTML-Dateien und kann eine XSS-Sicherheitsanfälligkeit darstellen, wenn Variablen mit Benutzereingaben an ihn übergeben werden.

Angular JS zeigt HTML innerhalb des Tags an

Die im obigen Link bereitgestellte Lösung hat bei mir funktioniert, keine der Optionen in diesem Thread hat funktioniert. Für alle, die mit AngularJS Version 1.2.9 dasselbe suchen

Hier ist eine Kopie:

Ok, ich habe eine Lösung dafür gefunden:

JS:

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

HTML:

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

BEARBEITEN:

Hier ist das Setup:

JS-Datei:

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

    }]);

HTML-Datei:

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

Glücklicherweise benötigen Sie keine ausgefallenen Filter oder unsicheren Methoden, um diese Fehlermeldung zu vermeiden. Dies ist die vollständige Implementierung, um HTML-Markups in einer Ansicht auf die beabsichtigte und sichere Weise ordnungsgemäß auszugeben.

Das Desinfektionsmodul muss nach Angular enthalten sein:

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

Dann muss das Modul geladen werden:

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

Auf diese Weise können Sie Markups in eine Zeichenfolge eines Controllers, einer Direktive usw. einfügen:

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

Schließlich muss es in einer Vorlage wie folgt ausgegeben werden:

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

Was die erwartete Ausgabe erzeugt: 42 ist die Antwort .

Ich habe es heute versucht, der einzige Weg, den ich gefunden habe, war dieser

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

ng-bind-html-unsafe funktioniert nicht mehr.

Dies ist der kürzeste Weg:

Erstellen Sie einen Filter:

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

Und aus Ihrer Sicht:

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

PS Bei dieser Methode müssen Sie das ngSanitizeModul nicht einschließen .

auf HTML

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

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

ODER

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

am Controller

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

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

funktioniert auch mit $scope.comment.msg = $sce.trustAsHtml(html);

Ich habe festgestellt, dass ich mit ng-sanitize kein ng-click im HTML hinzufügen konnte.

Um dies zu lösen, habe ich eine Richtlinie hinzugefügt. So was:

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

Und das ist der HTML:

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

Viel Glück.

Haben Sie dies einfach mit ngBindHtml getan, indem Sie eckigen (v1.4) Dokumenten gefolgt sind.

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

Stellen Sie sicher, dass Sie ngSanitize in die Abhängigkeiten des Moduls aufnehmen. Dann sollte es gut funktionieren.

Eine andere Lösung, die blrbr sehr ähnlich ist, außer dass ein Attribut mit Gültigkeitsbereich verwendet wird, ist:

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

Und dann

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

Hinweis : Sie ersetzen können element.append()mitelement.replaceWith()

Es gibt eine weitere Lösung für dieses Problem, indem neue Attribute oder Anweisungen im Winkel erstellt werden.

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>

oder

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

oder

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

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

Sie können auch ng-include verwenden .

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

Sie können "ng-show" verwenden , um diese Vorlagendaten auszublenden.

Hier ist die Lösung, einen Filter wie diesen zu machen

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

und wende dies als Filter auf das ng-bind-html like an

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

und danke an Ruben Decrop

Verwenden

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

und

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

Dazu müssen Sie angular-sanitize.jsbeispielsweise in Ihre HTML-Datei mit aufnehmen

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

Hier ist eine einfache (und unsichere) bind-as-htmlAnweisung, ohne dass Folgendes erforderlich ist ngSanitize:

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

Beachten Sie, dass dies zu Sicherheitsproblemen führen kann, wenn nicht vertrauenswürdige Inhalte gebunden werden.

Verwenden Sie wie folgt:

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

Arbeitsbeispiel mit Pipe zur Anzeige von HTML in einer Vorlage mit 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. Registrieren Sie die Pipe in app.module.ts

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

3. Verwenden Sie in Ihrer Vorlage

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

   Führen Sie das Code-Snippet ausErgebnisse ausblenden

   Erweitern Sie das Snippet

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

   Bitte fügen Sie die entsprechende Implementierung für getDivHtml in die zugehörige Datei component.ts ein.

Nur einfache Verwendung [innerHTML], wie unten:

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

Bevor Sie verwenden mussten ng-bind-html...

In Angular 7 + ionic 4 kann der HTML-Inhalt mithilfe von "[innerHTML]" angezeigt werden:

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

Ich hoffe, das wird dir auch helfen. Vielen Dank.