如何使用HTML内容创buildAngularJS UI引导popup窗口？

我想创build一个带pre pre标签JSON对象的prestrap popover。 天真的执行，

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

在将内容插入到popup窗口之前将内容转义。 用html内容指定popover正文的最佳方法是什么？

Answer 1

更新 ：

从这里可以看出，你现在应该能够做到这一点，而不必重写默认模板。

原版的：

至于angular1.2+ ng-bind-html-unsafe已被删除。 你应该使用$ sce服务。 参考 。

这是一个用于创build可信html的filter。

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

这里是使用这个filter覆盖的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 bootstrap回购的模板。 如果改变，覆盖模板将需要匹配的更新，并添加ng-bind-html=\"title | unsafe\"和ng-bind-html=\"content | unsafe\"属性以继续工作。

对于更新的对话在这里检查问题 。

Answer 2

使用popover-template指令

如果您使用的angular-ui版本等于或高于0.13.0 ，则最好的select是使用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'"模板名称周围的引号。

看演示plunker

---

作为一个附注，可以将popover模板外部化在一个专门的html文件中，而不是像上面那样在<script type="text/ng-template>元素中声明它。

看第二个演示plunker

Answer 3

我发布了一个解决scheme的github项目： https ： //github.com/angular-ui/bootstrap/issues/520

我想把这个function添加到你的项目中，这里是一个补丁。

添加这些指令：

 angular.module("XXX") .directive("popoverHtmlUnsafePopup", function () { return { restrict: "EA", replace: true, scope: { title: "@", content: "@", placement: "@", animation: "&", isOpen: "&" }, templateUrl: "template/popover/popover-html-unsafe-popup.html" }; }) .directive("popoverHtmlUnsafe", [ "$tooltip", function ($tooltip) { return $tooltip("popoverHtmlUnsafe", "popover", "click"); }]); 

并添加模板：

 <div class="popover {{placement}}" ng-class="{ in: isOpen(), fade: animation() }"> <div class="arrow"></div> <div class="popover-inner"> <h3 class="popover-title" ng-bind="title" ng-show="title"></h3> <div class="popover-content" bind-html-unsafe="content"></div> </div> </div> 

用法： <button popover-placement="top" popover-html-unsafe="On the <b>Top!</b>" class="btn btn-default">Top</button>

在plunkr上查看： http ://plnkr.co/edit/VhYAD04ETQsJ2dY3Uum3?p=preview

Answer 4

您需要更改默认的popup式模板以指定您希望允许Html内容。 看看popover-content div，它现在已经绑定了content属性，允许不安全的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() }'>" + "<div class='arrow'></div><div class='popover-inner'>" + "<h3 class='popover-title' ng-bind='title' ng-show='title'></h3>" + "<div class='popover-content' ng-bind-html-unsafe='content'></div>" + "<button class='btn btn-cancel' ng-click='manualHide()'>Cancel</button>" + "<button class='btn btn-apply' ng-click='manualHide()'>Apply</button></div></div>"); }]); 

Answer 5

对于所有传统的Bootstrap popover需求，您可以使用以下的angular度指令。 它消除了HTML模板中的混乱，并且非常易于使用。

您可以configurationpopup窗口的title ， content ， placement ，淡入/淡出delay ， trigger事件以及内容是否应被视为html 。 它也可以防止内容溢出和裁剪。

相关plunker与所有的代码在这里http://plnkr.co/edit/MOqhJi

撷取画面

用法

 <!-- HTML --> <div ng-model="popup.content" popup="popup.options">Some element</div> /* JavaScript */ this.popup = { content: 'Popup content here', options: { title: null, placement: 'right', delay: { show: 800, hide: 100 } } }; 

JavaScript的

 /** * Popup, a Bootstrap popover wrapper. * * Usage: * <div ng-model="model" popup="options"></div> * * Remarks: * To prevent content overflow and clipping, use CSS * .popover { word-wrap: break-word; } * Popup without title and content will not be shown. * * @param {String} ngModel popup content * @param {Object} options popup options * @param {String} options.title title * @param {Boolean} options.html content should be treated as html markup * @param {String} options.placement placement (top, bottom, left or right) * @param {String} options.trigger trigger event, default is hover * @param {Object} options.delay milliseconds or { show:<ms>, hide:<ms> } */ app.directive('popup', function() { return { restrict: 'A', require: 'ngModel', scope: { ngModel: '=', options: '=popup' }, link: function(scope, element) { scope.$watch('ngModel', function(val) { element.attr('data-content', val); }); var options = scope.options || {} ; var title = options.title || null; var placement = options.placement || 'right'; var html = options.html || false; var delay = options.delay ? angular.toJson(options.delay) : null; var trigger = options.trigger || 'hover'; element.attr('title', title); element.attr('data-placement', placement); element.attr('data-html', html); element.attr('data-delay', delay); element.popover({ trigger: trigger }); } }; }); 

Answer 6

请参阅https://github.com/jbruni/bootstrap-bower-jbruni ，它允许使用popover-template

Answer 7

下面的CSS样式似乎已经做了我想要的在我的具体情况：

 .popover-content { white-space: pre; font-family: monospace; } 

一般问题仍然存在。