machen HTML in AngularJS 1.x

Question

Ich habe eine Richtlinie und IMG Urls mit img src Ich bin zu ersetzen Inline-Bilder anzuzeigen

function message($filter) { 

    var directive = { 
     restrict: 'EA', 

     scope: { 
      data: '=' 
     }, 

     link: function(scope, elem, attrs) { 
      scope.data.content = scope.data.content.replace(/(https?:\/\/\S+(\.png|\.jpeg|\.jpg|\.gif))/g, "<img src='$1' alt=''>"); 
     }, 

     template: '<span>{{data.nickname}}:</span> {{data.content}}' 

    }; 

    return directive; 
} 

sondern um das Bild zu sehen, Inline Ich bin das HTML-Tag zu sehen, wie Text Ich untersuche $ sce, aber ich bin mir nicht sicher, wie man es innerhalb einer Direktive benutzt.

Answer 1

Sie sind näher !. Sie haben recht, wenn Sie mit dem Modul ngSanitize arbeiten.

Sie können im Grunde Raw HTML in Ihre Vorlage schreiben (mit ng-bind-html Direktive). Sie müssen es in Ihre Seite einbinden, und erklären es als eine Abhängigkeit in Ihrem Modul wie folgt aus:

<!-- HTML --> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.6.2/angular-sanitize.min.js"></script> 

// JavaScript 
angular.module("yourapp", ['ngSanitize']); 

Und dann binden Sie Ihre HTML-Inhalte in einem div (oder was auch immer) mit ng-bind-html Richtlinie wie folgt aus:

template: '<span>{{data.nickname}}:</span> <div ng-bind-html="data.content"></div>' 

Jetzt wird der reine HTML-Inhalt von data.content wie in der Vorlage Ihrer Direktive ersetzt. Hier ist ein working plunker für Ihre Referenz.

Answer 2

Ein eckigerer und sicherer Weg, dies zu tun, ist, HTML nicht direkt in die Vorlage zu schreiben. Stattdessen können Sie geschweifte Klammern verwenden, um die Bild-URL in der Vorlage wie folgt zu setzen:

template: ` 
    <span>{{data.nickname}}:</span> 
    <img ng-if="{{data.hasImage}}" src="{{data.url}}" alt=""> 
` 

Diese Vorlage/Datentrennung bewahrt.

So wie Sie es hatten, setzen Sie sich dem Risiko von XSS aus. Es gibt einen Grund dafür, dass Sie durch Hoops springen, um generierten HTML-Code in eine Vorlage einzufügen. Wenn ein Benutzer jemals ein Bild mit js in der URL hochladen kann, könnte Ihre Website gehackt werden. Angulars normales Templating verhindert diese Art von Angriff automatisch.

Wenn Sie mehrere Bilder benötigen, können Sie jedem Objekt in Ihren Daten eine URL-Eigenschaft hinzufügen, das Datenarray auf den Bereich legen und anschließend ng-repeat verwenden, um das Array von Objekten zu rendern.