Fügen Sie HTML in die Ansicht ein

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>

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

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>