AngularJS中Popover无法识别HTML标签问题及代码示例

我来帮你搞定这个问题！你遇到的核心问题是用错了popover的指令属性——popover="{{ data }}"会把内容当作纯文本渲染，自动转义所有HTML标签，所以哪怕你已经用$sce.trustAsHtml处理了字符串，也没法解析成预期的格式。

具体解决方案 #

你只需要把绑定纯文本的popover属性替换成专门用于HTML内容的popover-html（部分老版本AngularUI Bootstrap需要加uib-前缀，即uib-popover-html），并且注意不要用双大括号包裹变量，直接绑定即可：

第一步：保持控制器代码不变（你已经做对了HTML信任处理）

var popover = '<u>Hi</u>: Some message.<br><br>' + 
              '<u>New</u>: New msg.<br><br>' + 
              '<u>Next</u>: Next Data.<br><br>' + 
              '<u>Cancelled</u>: Remove service.<br><br>'; 
$scope.data = $sce.trustAsHtml(popover);

第二步：修改HTML中的popover指令

<th class="col-info hidden-xs text-left">
  Status 
  <span popover-placement="bottom" popover-html="data" popover-trigger="click" class="pull-right">
    <i class="fa fa-info-circle"></i>
  </span>
</th>

额外说明 #

• popover-html（或uib-popover-html）是AngularUI Bootstrap专门为渲染HTML内容设计的指令，它会直接解析你通过$sce.trustAsHtml标记为安全的HTML字符串，不会转义标签。
• 如果替换后还是不生效，检查你的AngularUI Bootstrap版本：0.14.x及以后的版本支持无uib-前缀的指令，更早的版本需要加上uib-前缀，也就是改成uib-popover-html="data"。

内容的提问来源于stack exchange，提问作者Saurav