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: value
Paaren 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>
function htmlSanitizer(html) {...
. Angular Devs haben entschieden, dass Sie in der Lage sein sollten, jede HTML-Bindung zu finden, indem Sie langsam alle versteckten Elemente Ihrer Seiten nacheinander durchgehen, um das EINZIGE fehlende Stück HTML zu finden. !!! sehr wütend auf eine solche Annahme !!!Antworten:
Verwenden Sie für Angular 1.x
ng-bind-html
im HTML:Zu diesem Zeitpunkt wird eine
attempting to use an unsafe value in a safe context
Fehlermeldung 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.ngSanitize
Es gibt 2 Schritte:
Fügen Sie die Ressource angle-sanitize.min.js hinzu, dh:
<script src="lib/angular/angular-sanitize.min.js"></script>
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'])
quelle
ng-bind-html-unsafe
wurde entfernt und die beiden Direktiven wurden kombiniert. Siehe: github.com/angular/angular.js/blob/master/…$sce
. Injizieren Sie es in den Controller und leiten Sie das HTML durch.$scope.thisCanBeusedInsideNgBindHtml = $sce.trustAsHtml(someHtmlVar);
Ansonsten bekam ich immer wiederattempting to use an unsafe value in a safe context
Sie können auch einen Filter wie folgt erstellen:
Dann in der Ansicht
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.
quelle
ngResource
Abhängigkeit ist nicht neccesary.sanitize
? Dies ist so irreführend, dass es eigentlich nichts desinfiziert. Stattdessen sollte es aufgerufentrust
werdentrustSafe
oder etwas Ähnliches.rawHtml
ist mein Name für den Filter anstelle vonsanitize
.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:
BEARBEITEN:
Hier ist das Setup:
JS-Datei:
HTML-Datei:
quelle
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:
Dann muss das Modul geladen werden:
Auf diese Weise können Sie Markups in eine Zeichenfolge eines Controllers, einer Direktive usw. einfügen:
Schließlich muss es in einer Vorlage wie folgt ausgegeben werden:
Was die erwartete Ausgabe erzeugt: 42 ist die Antwort .
quelle
<div><label>Why My Input Element Missing</label><input /></div>
... Wenn es Sie überrascht, dann aktualisieren Sie Ihre Antwort plz .. Weil ich alle 10 + Vote-Lösungen getestet habe .. Ihre Lösung hat bei mir nicht funktioniert, um meine Eingabe-Tags zu sehen .. gut, sonst .. Ich hatte Verwendung$sce.trustAsHtml(html)
Ich habe es heute versucht, der einzige Weg, den ich gefunden habe, war dieser
<div ng-bind-html-unsafe="expression"></div>
quelle
ng-bind-html-unsafe
funktioniert nicht mehr.Dies ist der kürzeste Weg:
Erstellen Sie einen Filter:
Und aus Ihrer Sicht:
PS Bei dieser Methode müssen Sie das
ngSanitize
Modul nicht einschließen .quelle
$sce
in der akzeptierten Antwort verwendete Lösung hat bei mir nicht funktioniert und ich wollte keine zusätzliche Abhängigkeit für etwas so Triviales aufnehmen.auf HTML
ODER
am Controller
funktioniert auch mit
$scope.comment.msg = $sce.trustAsHtml(html);
quelle
$sce
ist ordentlich, aber konnte ein Benutzer hier nicht einfach einen Haltepunkt hinzufügen und schädlichen Codethis.myCtrl.comment.msg
mithilfe eines Debuggers wiederherstellen ?ng-bind-html
wird.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:
Und das ist der HTML:
Viel Glück.
quelle
Haben Sie dies einfach mit ngBindHtml getan, indem Sie eckigen (v1.4) Dokumenten gefolgt sind.
Stellen Sie sicher, dass Sie ngSanitize in die Abhängigkeiten des Moduls aufnehmen. Dann sollte es gut funktionieren.
quelle
Eine andere Lösung, die blrbr sehr ähnlich ist, außer dass ein Attribut mit Gültigkeitsbereich verwendet wird, ist:
Und dann
Hinweis : Sie ersetzen können
element.append()
mitelement.replaceWith()
quelle
Es gibt eine weitere Lösung für dieses Problem, indem neue Attribute oder Anweisungen im Winkel erstellt werden.
product-specs.html
app.js.
index.html
oder
oder
https://docs.angularjs.org/guide/directive
quelle
Sie können auch ng-include verwenden .
Sie können "ng-show" verwenden , um diese Vorlagendaten auszublenden.
quelle
Hier ist die Lösung, einen Filter wie diesen zu machen
und wende dies als Filter auf das ng-bind-html like an
und danke an Ruben Decrop
quelle
Verwenden
und
Dazu müssen Sie
angular-sanitize.js
beispielsweise in Ihre HTML-Datei mit aufnehmenquelle
Hier ist eine einfache (und unsichere)
bind-as-html
Anweisung, ohne dass Folgendes erforderlich istngSanitize
:Beachten Sie, dass dies zu Sicherheitsproblemen führen kann, wenn nicht vertrauenswürdige Inhalte gebunden werden.
Verwenden Sie wie folgt:
quelle
Arbeitsbeispiel mit Pipe zur Anzeige von HTML in einer Vorlage mit Angular 4.
1.Crated Pipe Escape-html.pipe.ts
`
`2. Registrieren Sie die Pipe in app.module.ts
Verwenden Sie in Ihrer Vorlage
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.
quelle
Nur einfache Verwendung
[innerHTML]
, wie unten:Bevor Sie verwenden mussten
ng-bind-html
...quelle
In Angular 7 + ionic 4 kann der HTML-Inhalt mithilfe von "[innerHTML]" angezeigt werden:
Ich hoffe, das wird dir auch helfen. Vielen Dank.
quelle