如何使用 HTML 内容创建 AngularJS UI 引导程序弹出窗口? [英] How do I create an AngularJS UI bootstrap popover with HTML content?

问题描述

我想创建一个 bootstrap popoverJSON 对象.天真的实现，

I want to create a bootstrap popover with a pre tag containing a prettified JSON object. The naive implementation,

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

escapes the content before inserting it into the popup. What's the best way of specifying a popover body with html content?

在将内容插入弹出窗口之前对其进行转义.指定带有 html 内容的弹出框正文的最佳方法是什么?

解决方案

推荐答案

更新:

正如在此中所见，您现在应该能够在不覆盖默认模板的情况下执行此操作.>

原文:

ORIGINAL:

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

As of angular 1.2+ ng-bind-html-unsafe has been removed. You should be using the $sce service Reference.

这是用于创建受信任 HTML 的过滤器.

Here is a filter for creating trusted HTML.

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

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

Here is the overwritten Angular Bootstrap 0.11.2 template making use of this filter

// 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 |不安全\" 和 ng-bind-html=\"content |unsafe\" 属性以继续工作.

EDIT 2: As this answer keeps getting hits, I'll keep it updated as best I can. As a reference Here is the template from the angular-ui bootstrap repo. If this changes, the override template will require matching updates and the addition of the ng-bind-html=\"title | unsafe\" and ng-bind-html=\"content | unsafe\" attributes to continue working.

有关更新的对话，请查看问题在这里.

For updated conversation check the issue here.

这篇关于如何使用 HTML 内容创建 AngularJS UI 引导程序弹出窗口?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！