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

Answer 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

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

Answer 3

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

Replace the default template with the attribute

popover-template="nameOfYourTemplate.html"