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

Question

我想创建一个bootstrap popover带有包含美化 JSON 对象的 pre 标记。天真的实现，

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

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

Answer 1

更新:

如 this 所示，您现在应该能够在不覆盖默认模板的情况下执行此操作。

原件:

从 Angular 1.2+ 开始，ng-bind-html-unsafe 已被删除。您应该使用 $sce服务Reference .

这是一个用于创建可信 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:由于这个答案不断受到点击，我将尽力更新它。作为引用Here是来自 angular-ui bootstrap repo 的模板。如果发生更改，覆盖模板将需要匹配更新并添加 ng-bind-html=\"title | unsafe\" 和 ng-bind-html=\"content | unsafe\" 属性以继续工作。

有关更新的对话，请检查 issue here .