Clever Geek Handbook

How to insert html into Angular loading ui

How can I insert html in Angular UI boostrap popover? I'd rather just show and hide the div with all the content of the html popover.

Now I have:

<a popover-placement="bottom" popover-append-to-body="true" popover="LOG OUT">BUTTON HERE</a>

I would like to replace the text LOG OUT

with full html, including Angular.js bindings and directives.

+3


source to share


4 answers


It looks like they tried this option, they even have tooltip-html-unsafe

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

You might be able to work in the 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 just use dropdown

.

+1


source


In the bootstrap documentation http://getbootstrap.com/javascript/#popovers you can use the html attribute to set the html. You can either set it using data attributes or javascript. Though I would just recommend using the template attribute instead of the html attribute.

In angular, you have to create 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 yet implemented in angular UI loading

0


source


Like last weekend, the popover-template feature was released as part of the Angular UI version 0.13.0 bootstrap. This allows you to set the ng HTML template as the body of the popover.

0


source


Just use a directive uib-popover-html

. Just present it with a model containing a URL representing the location of the template used for the popover body.
Please note that the content of this template needs to be wrapped in a tag, for example.

0


source






More articles:


All Articles