如何使用HTML内容创建AngularJS UI引导程序弹出窗口？

Question

我想创建一个带有预标记的引导弹出窗口，该预标记包含已预定义的JSON对象。天真的实现，

<span popover='<pre>{[ some_obj | json:"  " ]}</pre>'
      popover-trigger='mouseenter'>

在将内容插入弹出窗口之前先对其进行转义。用HTML内容指定弹出框的最佳方法是什么？

Answer 1

更新 ：

使用popover-template指令如果您使用的angular-ui版本等于或大于0.13.0，则最好的选择是使用popover-template指令。使用方法如下：

<button popover-template="'popover.html'">My HTML popover</button>

<script type="text/ng-template" id="popover.html">
    <div>
        Popover content
    </div>
</script>

注意：不要忘记中模板名称的引号popover-template=“‘popover.html’“。

请参阅演示插件

附带说明，可以将弹出框模板外部化到专用的html文件中，而不用在<script type="text/ng-template>上面的元素中声明它。

参见第二个演示插件

原版的：

从角度开始1.2+ ng-bind-html-unsafe已被删除。您应该使用$
sce
服务。参考。

这是用于创建可信html的过滤器。

MyApp.filter('unsafe', ['$sce', function ($sce) {
    return function (val) {
        return $sce.trustAsHtml(val);
    };
}]);

这是使用此过滤器的覆盖的 Angular Bootstrap 0.11.2 模板

// update popover template for binding unsafe html
angular.module("template/popover/popover.html", []).run(["$templateCache", function ($templateCache) {
    $templateCache.put("template/popover/popover.html",
      "<div class=\"popover {{placement}}\" ng-class=\"{ in: isOpen(), fade: animation() }\">\n" +
      "  <div class=\"arrow\"></div>\n" +
      "\n" +
      "  <div class=\"popover-inner\">\n" +
      "      <h3 class=\"popover-title\" ng-bind-html=\"title | unsafe\" ng-show=\"title\"></h3>\n" +
      "      <div class=\"popover-content\"ng-bind-html=\"content | unsafe\"></div>\n" +
      "  </div>\n" +
      "</div>\n" +
      "");
}]);

编辑：这是一个Plunker实现。

编辑2：由于此答案不断受到关注，我将尽我所能保持更新。作为参考，这是angular-ui引导回购中的模板。如果更改，覆盖模板将要求进行匹配的更新，并添加ng-bind-html=\"title | unsafe\"和ng-bind- html=\"content | unsafe\"属性，以继续工作。

有关更新的对话，请在此处查看问题。