angularjs - uib-popover-html将不接受我的html字符串

Question

我使用angular-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调用中，但是并没有改变任何事情。

这是一个小矮人
http://plnkr.co/edit/3JSly1anPBUiGyqBcsD1

Answer 1

使用$sce.trustAsHtml为我工作，如下所示。

注意:trustAsHtml告诉Angular相信HTML是安全的，因此仅当您确实信任HTML时才应使用它，即它不是用户提供的。

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

或者，如果您的内容是动态的，并且您需要一个功能:

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

(缓存 trustAsHtml返回的值的原因是 trustAsHtml总是返回一个新对象，因此可能导致无限的$ digest循环)