Angular Ui Bootstrap Popover html 在线如何转义或编码内部html

Question

我正在从一个非常旧的 ui-boostrap 版本迁移到新版本。在之前的版本中我们只有 popover="myhtml" 现在需要有 popover-html 和 sanatize html。问题是当我们有 html 内联时，当我们在范围变量上有 html 时很简单 uib-popover-html="getPopoverContent(searchResultHtml)"

但是那些与 html 内联的那些，当我尝试使用相同的语法时失败了，因为 uib-popover-html="getPopoverContent('theHtml')" theHtml 通常有引号打破所有

失败的函数示例

uib-popover-html="getPopoverContent('<ul class="list-unstyled"><li><span class="text-muted">true_ip:</span> {{txn.thm_info.true_ip}}</li>"')

问题是双引号关闭了 uib-popover-html，因此全部被打破。这里需要什么，我试图用 / 内引号转义，但失败了。我知道正确的方法是做模板，只是为了做一个 quick 迁移，让我们有更多的时间来迁移所有东西。

谢谢

Answer 1

您知道正确的做法是使用模板，而且您的 HTML 中有一个 angular 表达式，因此需要一个模板。

所以只要做正确的事，并使用模板。不要试图寻找讨厌的捷径。作为奖励，这将使代码更清晰。

<script type="text/ng-template" id="myPopoverTemplate.html">
  <ul class="list-unstyled">
    <li><span class="text-muted">true_ip:</span> {{ txn.thm_info.true_ip }}</li>
  </ul>
</script>

<button uib-popover-template="'myPopoverTemplate.html'" ...>

Angular Ui Bootstrap Popover html 在线如何转义或编码内部html

Angular Ui Boostrap Popover with html inline how to scape or encode the innerhtml

angularjs

angular-ui-bootstrap