Kann ein HTML-Fragment in einem AngularJS-Controller erstellt und dieser HTML-Code in der Ansicht angezeigt werden?
Dies ergibt sich aus der Anforderung, aus einem inkonsistenten JSON-Blob eine verschachtelte Liste von id : value
-Paaren zu machen. 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 darstellen, ohne nur den HTML-Code zu drucken.
Aktualisieren
Es scheint, dass das Problem dadurch entsteht, dass der erzeugte HTML-Code in Winkeln als String dargestellt wird. Will versuchen, einen Ausweg zu finden.
Beispiel Controller:
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-html
Im HTML:
<div ng-bind-html="thisCanBeusedInsideNgBindHtml"></div>
Zu diesem Zeitpunkt wird ein attempting to use an unsafe value in a safe context
- Fehler angezeigt, sodass Sie entweder ngSanitize oder $ sce verwenden müssen, um diesen Fehler zu beheben.
Verwenden Sie $sce.trustAsHtml()
im Controller, um den HTML-String zu konvertieren.
$scope.thisCanBeusedInsideNgBindHtml = $sce.trustAsHtml(someHtmlVar);
Es gibt 2 Schritte:
geben Sie die Ressource angle-sanitize.min.js an, d. h .:<script src="lib/angular/angular-sanitize.min.js"></script>
Enthalten Sie in einer js-Datei (controller oder normalerweise app.js) ngSanitize, d. H .:angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'ngSanitize'])
Sie können einen Filter auch so 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 ü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
Die im obigen Link angegebene Lösung funktionierte für mich, keine der Optionen in diesem Thread. Für alle, die das gleiche mit AngularJS Version 1.2.9 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 unsichere Methoden, um diese Fehlermeldung zu vermeiden. Dies ist die vollständige Implementierung, um das HTML-Markup in einer Ansicht ordnungsgemäß und sicher auszugeben.
Das Desinfektionsmodul muss nach Angular eingefügt werden:
<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 Markierungen aus einem Controller, einer Direktive usw. in eine Zeichenfolge einfügen:
scope.message = "<strong>42</strong> is the <em>answer</em>.";
Schließlich muss es in einer Vorlage folgendermaßen ausgegeben werden:
<p ng-bind-html="message"></p>
Was die erwartete Ausgabe ergibt: 42 ist die Antwort .
Ich habe es heute versucht, der einzige Weg, den ich gefunden habe, war dies
<div ng-bind-html-unsafe="expression"></div>
ng-bind-html-unsafe
funktioniert nicht mehr.
Dies ist der kürzeste Weg:
Einen Filter erstellen:
myApp.filter('unsafe', function($sce) { return $sce.trustAsHtml; });
Und aus deiner Sicht:
<div ng-bind-html="customHtml | unsafe"></div>
P.S. Für diese Methode müssen Sie nicht das Modul ngSanitize
einfügen.
auf HTML
<div ng-controller="myAppController as myCtrl">
<div ng-bind-html-unsafe="myCtrl.comment.msg"></div>
OR
<div ng-bind-html="myCtrl.comment.msg"></div
auf dem Controller
mySceApp.controller("myAppController", function myAppController( $sce) {
this.myCtrl.comment.msg = $sce.trustAsHtml(html);
funktioniert auch mit $scope.comment.msg = $sce.trustAsHtml(html);
Ab Angular 4 funktioniert dies nun wie folgt:
<div [innerHTML]="htmlString">
</div>
Entnommen aus dieser Frage hier.
Ich habe festgestellt, dass ich mit ng-sanitize nicht in der HTML-Datei ng-click hinzufügen konnte.
Um das zu lösen, habe ich eine Direktive 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 das HTML:
<htmldiv content="theContent"></htmldiv>
Viel Glück.
Tat dies einfach mit ngBindHtml durch folgen von angle (v1.4) docs ,
<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 der von blrbr sehr ähnlich ist, außer der Verwendung eines Bereichsattributs, 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 können element.append()
durch element.replaceWith()
ersetzen.
es gibt eine weitere Lösung für dieses Problem, indem neue -Attribute oder Anweisungen in angle erstellt werden.
produktspez.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>
sie können auchng-includeverwenden.
<div class="col-sm-9 TabContent_container" ng-include="template/custom.html">
</div>
sie können"ng-show"verwenden, um diese Vorlagendaten auszublenden.
Benutzen
<div ng-bind-html="customHtml"></div>
und
angular.module('MyApp', ['ngSanitize']);
Dazu müssen Sie angular-sanitize.js
, Zum Beispiel in Ihre HTML-Datei mit einfügen
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-sanitize.js"></script>
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 die ng-bind-html an
<div ng-bind-html="code | trusted">
und danke an Ruben Decrop
Verwenden Sie einfach [innerHTML]
wie unten:
<div [innerHTML]="htmlString"></div>
Bevor Sie ng-bind-html
... verwenden mussten.
Hier ist eine einfache (und unsichere) bind-as-html
-Direktive ohne ngSanitize
:
myModule.directive('bindAsHtml', function () {
return {
link: function (scope, element, attributes) {
element.html(scope.$eval(attributes.bindAsHtml));
}
};
});
Beachten Sie, dass sich dies für Sicherheitsprobleme öffnet, wenn nicht vertrauenswürdiger Inhalt gebunden wird.
Verwenden Sie wie folgt:
<div bind-as-html="someHtmlInScope"></div>