it-swarm.com.de

Fügen Sie HTML in die Ansicht ein

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

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.

$ sce

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

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

ngSanitize

Es gibt 2 Schritte:

  1. geben Sie die Ressource angle-sanitize.min.js an, d. h .:
    <script src="lib/angular/angular-sanitize.min.js"></script>

  2. Enthalten Sie in einer js-Datei (controller oder normalerweise app.js) ngSanitize, d. H .:
    angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'ngSanitize'])

1102
Luke Madera

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.

304

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

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 .

63

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

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

61
Damax

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.

51

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

25
Sotos

Ab Angular 4 funktioniert dies nun wie folgt:

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

Entnommen aus dieser Frage hier.

16
Garth

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.

9
Matt

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.

6
Henry Neo

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.

4
jmb-mage

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

3
yugi

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.

3
Vikash Sharma

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>
1
Patricia Beier

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

1
bahri noredine

Verwenden Sie einfach [innerHTML] wie unten:

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

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

0
Alireza

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