How do I create an AngularJS UI bootstrap popover with HTML content?

Question

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

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

Answer 1

UPDATE:

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

ORIGINAL:

As of angular 1.2+ ng-bind-html-unsafe has been removed. You should be using the $sce service Reference.

Here is a filter for creating trusted HTML.

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

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

EDIT: Here is a Plunker implementation.

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.

Answer 2

Use the popover-template directive

If you are using a version of angular-ui equal or above 0.13.0, your best option is to use the popover-template directive. Here is 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> 

NB: Do not forget the quotes around the template name in popover-template="'popover.html'".

See demo plunker

---

As a side note, it is possible to externalize the popover template in a dedicated html file, instead of declaring it in a <script type="text/ng-template> element as above.

See second demo plunker