"Extending" Angular UI Bootstrap Popover

Question

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

What have you tried? This doesn't sound too horrible. http://angular-ui.github.io/bootstrap/ has a popover directive. — Nix, May 01 '14 at 11:54
This question would probably help: http://stackoverflow.com/questions/16722424/how-do-i-create-an-angularjs-ui-bootstrap-popover-with-html-content — Nix, May 01 '14 at 12:00
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 (see my answer) — Mistic, May 01 '14 at 17:52

score 7 · Answer 1 · answered May 01 '14 at 14:42

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>

score 0 · Answer 2 · answered May 01 '14 at 15:00

0

ui-bootstrap popover does support HTML template which can contain ng-click.

Replace the default template with the attribute

popover-template="nameOfYourTemplate.html"

answered May 01 '14 at 15:00

Chi Row

1,106
7
18

1

it is released in version 0.13.0 – Ida N Jun 10 '15 at 00:11

score 0 · Accepted Answer · answered May 01 '14 at 17:52

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

Unfortunately bootstrap-bower-jbruni solution does not work with angular versions >1.3.0 (1.3.0 DOES work) — yar1, Dec 11 '14 at 10:44

"Extending" Angular UI Bootstrap Popover

3 Answers3