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