"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. angular-ui.github.io/bootstrap has a popover directive. — Nix
– Nix, Commented May 1, 2014 at 11:54
This question would probably help: stackoverflow.com/questions/16722424/… — Nix
– Nix, Commented May 1, 2014 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
– Mistic, Commented May 1, 2014 at 17:52

aet · Accepted Answer · 2014-05-01 14:42:08Z

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>

Chi Row · Accepted Answer · 2014-05-01 15:00:14Z

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 1, 2014 at 15:00

Chi Row

1,1067 silver badges18 bronze badges

1 Comment

Ida N Over a year ago

it is released in version 0.13.0

Mistic · Accepted Answer · 2014-05-01 17:52:02Z

0

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

answered May 1, 2014 at 17:52

Mistic

1,4762 gold badges15 silver badges29 bronze badges

1 Comment

yar1 Over a year ago

Unfortunately bootstrap-bower-jbruni solution does not work with angular versions >1.3.0 (1.3.0 DOES work)

Collectives™ on Stack Overflow

"Extending" Angular UI Bootstrap Popover

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related