uib-popover-htmlは自分のhtml文字列を受け付けません

Question

私は、角度ui-bootstrapのバージョン0.14.2を使用しています。私はpopoverにラインリターンを表示できませんでした。 私はポップオーバー-htmlのディレクティブを使用し、そして、そのような

Limite inférieure<br>Limite supérieure 

として文字列は、それが次のエラーを与える：

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>]. 

私は$のsce.trustAsHtml呼び出しで私の文字列をラップしようとしたが、それはdidnのものを変えないでください。ここで

は、以下のよう$sce.trustAsHtmlを使用して私のためにplunker http://plnkr.co/edit/3JSly1anPBUiGyqBcsD1

Answer 1

作品です。

注：Angularは、HTMLが安全であることを信頼するように指示します。したがって、HTMLを信頼する場合、つまりユーザーが提供しない場合にのみ使用する必要があります。

JS：

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

HTML：

JS：

Updated Plunker

またはあなたのコンテンツが動的であり、あなたが機能を必要とする場合

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

HTML：

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

Plunker

（trustAsHtmlによって返された値をキャッシュするための理由はtrustAsHtmlはいつも新しいオブジェクトを返すことであることは無限$ダイジェストループを引き起こす可能性があります）

Answer 2

受け入れられたアプローチは、簡単にクロスサイトスクリプティングの脆弱性につながります。表示するコンテンツを明示的に信頼する場合は、実際には$sce.trustAsHtmlを使用する必要があります。アンギュラブートストラップドキュメントはまた、その時のヒント：

ユーザがコンテンツを確保するための責任があるDOMに入れても安全です！

代替とより安全なアプローチは、自動的にHTMLをサニタイズする$sanitizeを使用していますng-bind-htmlと組み合わせて、単純なテンプレートでuib-popover-templateを使用することです。

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." 

また、あなたのアプリでngSanitizeを宣言するとangular-sanitize.jsスクリプトを含めることを確認する必要があります。参照するために更新されたプランカーを見てください。

Updated Plunker