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