"Extending" Angular UI Bootstrap Popover
Solution 1
Seems like I was no clear enough, my problem was not (yet) to add HTML in the popover bu to create the popover from my own directive.
This is a way to do it:
.directive('myDirective', function() {
return {
restrict: 'A',
template: '<span popover="content" popover-title="title"></span>',
link: function($scope) {
$scope.content = '.....';
$scope.title = '.....';
}
};
})
And about HTML content, Chi Row gave a solution which is not applicable yet with the official version (tough available on a fork https://github.com/jbruni/bootstrap-bower-jbruni)
aet version also work on the current version
Solution 2
The ui-bootstrap docs are pretty good. However, you said you wanted to put html in your popover. The ui-bootstrap popover does not support that. We have added some "extra" popover stuff in a separate module in our project, maybe you could try something like this too.
.directive( 'popoverHtmlPopup', [ function() {
return {
restrict: 'EA',
replace: true,
scope: { title: '@', content: '@', placement: '@', animation: '&', isOpen: '&' },
templateUrl: 'template/popover/popover-html.html'
};
}])
.directive( 'popoverHtml', [ '$compile', '$timeout', '$parse', '$window', '$tooltip', function ( $compile, $timeout, $parse, $window, $tooltip ) {
return $tooltip( 'popoverHtml', 'popover', 'click' );
}])
You will need the template too of course:
angular.module("template/popover/popover-html.html", []).run(["$templateCache", function($templateCache) {
$templateCache.put("template/popover/popover-html.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=\"title\" ng-show=\"title\"></h3>\n" +
" <div class=\"popover-content\" ng-bind-html=\"content\"> </div>\n" +
" </div>\n" +
"</div>\n" +
"");
}]);
And then use it like so:
<i title="View More Info" class="icon-info-sign"
data-popover-html="varWithHtml"
data-popover-title="More Info">
</i>
Mistic
Updated on June 14, 2022Comments
-
Mistic almost 2 years
(I'm kinda new to AngularJS)
I would like to create a directive which triggers a Bootstrap Popover when the user click on the element where the directive is put. To popover will have an HTML content generated inside my directive and elements in this HTML will have ng-click directives.
I "plain jQuery" it would simply be
element.popover({ content: myGeneratedContent }) .popover('show'); // some code to attach events to the content
But I can't really figure out how to achieve this with Angular UI. Any clue ?
Thanks
--
what I want to do is a button for https://github.com/mistic100/Angular-Smilies which display all available smileys and, on click, add the corresponding shortcode to the binded model.
-
yar1 over 9 yearsUnfortunately bootstrap-bower-jbruni solution does not work with angular versions >1.3.0 (1.3.0 DOES work)
-
Ida N almost 9 yearsit is released in version 0.13.0