CODEWITHSUNDEEP
javascriptangularjsangular-ui-bootstrap
Justin
Justin

Reputation: 45350

How to inject html into an Angular UI bootstrap popover

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.

Upvotes: 3

Views: 5324

Answers (4)

Manas
Manas

Reputation: 838

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.

Upvotes: 0

user3915158
user3915158

Reputation: 1

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.

Upvotes: 0

Dylan
Dylan

Reputation: 4773

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.

Upvotes: 1

Andrei Dvoynos
Andrei Dvoynos

Reputation: 1145

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

Upvotes: 0

Related Questions