How do I create an AngularJS UI bootstrap popover 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 htmlangular.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.
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.
I have posted a solution on the github project: https://github.com/angular-ui/bootstrap/issues/520
I you want to add this functionality to your project, here is a patch.
Add those 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 the 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>
View it on plunkr: http://plnkr.co/edit/VhYAD04ETQsJ2dY3Uum3?p=preview