如何创建的HTML内容的AngularJS UI引导酥料饼？ [英] How do I create an AngularJS UI bootstrap popover with HTML content?

问题描述

我想创建一个与包含$ P $一个pre标签引导酥料饼 pttified JSON对象。天真实施

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'>

将其插入弹出之前逸出的内容。什么是指定酥料饼体的HTML内容的最佳方式？

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

推荐答案

更新

如可在已经看到了这一点，您现在应该能够做到这一点，而不覆盖默认模板。

As can been seen in this, you should now be able to do this without overriding the default template.

原文：

由于角1.2+ 的NG-结合HTML的不安全已被删除。你应该使用 $ 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);
    };
}]);

下面是覆盖角引导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：由于这个答案状态越来越命中，我会保持更新，尽我所能。作为参考这里是模板从棱角分明的UI引导回购。如果这个改变，覆盖模板将需要匹配的更新和添加了 NG-绑定-HTML = \\称号|不安全\\的和纳克-bind-HTML = \\内容|不安全\\属性继续工作。

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屋！