How can I inject html into a Angular UI boostrap popover? I'd prefer to simply show and hide a div with all the popover html content.
Right now I have:
<a popover-placement="bottom" popover-append-to-body="true" popover="LOG OUT">BUTTON HERE</a>
I'd like to replace the text LOG OUT with full html, including Angular.js bindings and directives.
It looks like they have been trying to make that an option, they even have a tooltip-html-unsafe that seems to work for tooltips.
<a popover-placement="bottom" popover-append-to-body="true" popover="<h1>LOG OUT</h1>" tooltip-html-unsafe>BUTTON HERE</a>
Your may be able to work in a popover version, something like this works :
angular.module( 'ui.bootstrap.popover')
.directive( 'popoverHtmlUnsafePopup', function () {
return {
restrict: 'EA',
replace: true,
scope: { content: '@', placement: '@', animation: '&', isOpen: '&' },
templateUrl: 'template/tooltip/tooltip-html-unsafe-popup.html'
};
})
.directive( 'popoverHtmlUnsafe', [ '$tooltip', function ( $tooltip ) {
return $tooltip('popoverHtmlUnsafe', 'popover', 'click' );
}]);
but I would probably just use a dropdown.
Per bootstrap's documentation http://getbootstrap.com/javascript/#popovers you can use the html attribute to set the html. You can either set it by using data attributes, or by javascript. Although I would just recommend using the template attribute instead of the html attribute.
In angular, you should make a directive that takes care of this.
According to: https://github.com/angular-ui/bootstrap/blob/master/src/popover/popover.js
html popovers are not implemented yet in angular UI bootstrap
As of this past weekend, the popover-template feature was released as part of Angular UI bootstrap version 0.13.0. It allows you to set an HTML ng-template as the body of a popover.
Just use uib-popover-html directive. Just provide it a model containing the URL representing the location of a template to use for the popover body.
Note that the contents of this template need to be wrapped in a tag, e.g.
