How to create a bootable AngularJS UI boot file with HTML content?

Question

I want to create a bootstrap popover with a preliminary tag containing a JSON prefix object. Naive implementation

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

Deletes content before pasting it into a popup. What is the best way to specify a body popover with html content?

Answer 1

UPDATE

As you can see in this , now you can do this without overriding the default template.

ORIGINAL:

How removed from angular 1.2+ ng-bind-html-unsafe . you must use the $ sce service. Link

Here is a filter for creating reliable html.

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

Here is a rewritten Angular Bootstrap 0.11.2 template using 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" + ""); }]); 

EDIT: The following is Plunker .

EDIT 2: As this answer continues to receive hits, I will support it as best as possible. By reference Here is a template from the angular -ui bootstrap repository. If this changes, the redefinition template will require matching updates and adding the attributes ng-bind-html=\"title | unsafe\" and ng-bind-html=\"content | unsafe\" to continue.

For an updated conversation, check here .

Answer 2

Use the popover-template directive

If you use a version of angular -ui equal to or higher than 0.13.0 , it is best to use the popover-template directive. Here's how to use it:

 <button popover-template="'popover.html'">My HTML popover</button> <script type="text/ng-template" id="popover.html"> <div> Popover content </div> </script> 

Note. Remember the quotation marks around the template name in popover-template="'popover.html'" .

See demo plunker

---

As a note, you can export the popover template to the selected html file rather than declaring it in the <script type="text/ng-template> element, as described above.

See second demo plunker

Answer 3

I am posting a solution on the github project: https://github.com/angular-ui/bootstrap/issues/520

I want to add this functionality to your project, here is the patch.

Add these directives:

 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"); }]); 

And add a template:

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

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

Take a look at plunkr: http://plnkr.co/edit/VhYAD04ETQsJ2dY3Uum3?p=preview

Answer 4

You need to change the default popover template to indicate that you want to allow Html content. Take a look at the popover-content div, now it has a binding to the content property, which allows insecure 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

For all your usual Bootstrap popover tasks, you can use the following angular directive. It removes clutter from the HTML template and is very easy to use.

You can configure the popover title , content , placement , fade in / out delay , trigger event and whether the content should be treated as html . It also prevents content overflow and clipping.

Associated plunker with all codes here http://plnkr.co/edit/MOqhJi

Screencap

Using

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

See https://github.com/jbruni/bootstrap-bower-jbruni for a popover template

Answer 7

The following CSS style seems to have done what I wanted in my particular case:

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

The general question remains open.