我想创建一个带有预标记的引导弹出窗口,该预标记包含已预定义的JSON对象。天真的实现,
<span popover='<pre>{[ some_obj | json:" " ]}</pre>' popover-trigger='mouseenter'>
在将内容插入弹出窗口之前先对其进行转义。用HTML内容指定弹出框的最佳方法是什么?
更新 :
使用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>上面的元素中声明它。
<script type="text/ng-template>
参见第二个演示插件
原版的:
从角度开始1.2+ ng-bind-html-unsafe已被删除。您应该使用$ sce服务。参考。
ng-bind-html-unsafe
这是用于创建可信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\"属性,以继续工作。
ng-bind-html=\"title | unsafe\"
ng-bind- html=\"content | unsafe\"
有关更新的对话,请在此处查看问题。