小编典典

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

angularjs

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

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

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


阅读 275

收藏
2020-07-04

共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\"属性,以继续工作。

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

2020-07-04