uib-popover-html akzeptiert meine HTML-Zeichenfolge nicht

Question

Ich benutze die Versionen 0.14.2 von eckigen-ui-Bootstrap. Ich konnte im Popover keine Zeilenumbrüche anzeigen. Ich benutze die popover-html-Richtlinie und eine Zeichenfolge wie

Limite inférieure<br>Limite supérieure 

Es gibt den folgenden Fehler:

Lexer Error: Unexpected next character at columns 41-41 [é] in expression [<div>Approchant des limites<br>Limite supérieure: 34:12<br>Limite inférieure: -34:12</div>]. 

Ich habe versucht, meinen String in einem $ sce.trustAsHtml Anruf Einwickeln, aber es didn Ändere nichts. Hier

ist ein Plunker http://plnkr.co/edit/3JSly1anPBUiGyqBcsD1

Answer 1

Werke für mich $sce.trustAsHtml wie unten.

Hinweis: trustAsHtml teilt Angular mit, dass der HTML-Code sicher ist, also sollte nur verwendet werden, wenn Sie dem HTML vertrauen, d. H. Es wird nicht vom Benutzer bereitgestellt.

JS:

$scope.popoverContent = $sce.trustAsHtml('Line 1<br>Line2'); 

HTML:

<button popover-placement="right" uib-popover-html="popoverContent" type="button" class="btn btn-default">Popover</button> 

Updated Plunker

Oder wenn Ihre Inhalte dynamisch ist und Sie benötigen eine Funktion:

JS:

$scope.input = 'Line 1<br/>Line 2'; 

var trusted = {}; 

$scope.getPopoverContent = function(content) { 
    return trusted[content] || (trusted[content] = $sce.trustAsHtml(content)); 
} 

HTML:

<button popover-placement="right" uib-popover-html="getPopoverContent(input)" type="button" class="btn btn-default">Popover</button> 

Plunker

(Der Grund für die von trustAsHtml zurückgegebene Wert Cachen ist, dass trustAsHtml immer ein neues Objekt zurückgibt, so kann eine unendliche $ verdauen Schleife verursachen)

Answer 2

Die Der akzeptierte Ansatz kann leicht zu einer Cross-Site-Scripting-Schwachstelle in Ihrer Anwendung führen. Sie sollten wirklich nur $sce.trustAsHtml verwenden, wenn Sie explizit dem Inhalt vertrauen, den Sie anzeigen möchten. Die Winkel-Bootstrap-Dokumentation auch Hinweise auf, dass:

Der Benutzer für die Gewährleistung der Inhalte verantwortlich ist, sicher in das DOM zu setzen!

Eine alternative und sicherere Ansatz ist uib-popover-template mit einer einfachen Vorlage in Kombination zu verwenden, mit ng-bind-html die $sanitize verwendet automatisch die HTML zu sanieren.

HTML

<p uib-popover-template="myPopoverTemplateUrl" 
    popover-trigger="mouseenter" 
    popover-placement="top" 
    popover-append-to-body="true"> 
     Show a Popover on Hover 
</p> 
<script type="text/ng-template" id="myPopoverTemplate.html"> 
    <div> 
     <p ng-bind-html="popoverContent"></p> 
    </div> 
</script> 

JS

$scope.myPopoverTemplateUrl = "myPopoverTemplate.html"; 
$scope.popoverContent = "This is HTML <b> And will be sanitized." 

Sie müssen auch sicherstellen, dass ngSanitize in Ihrer Anwendung zu erklären und die angular-sanitize.js-Skript. Bitte werfen Sie einen Blick auf den aktualisierten Plocker als Referenz.

Updated Plunker