Popover not displaying in angular template

Question

I am using bootstrap popover with angular template. I am including the angular template with ng-include directive. The template consists of a popover. I am trying to bring that popover through a angular directive but it's not getting displayed. angular directive

angular.module('app').directive('popover', function () {
    return {
        link: function (scope, element, attrs) {
            $("[data-toggle=popover]").popover();
        }
    };
});

The following html template is being included from another html page with ng-include directive.

<div>
    <span class="title">
        <button title="" data-original-title="" class="popper btn-link" popover data-toggle="popover">4 Peoples</button>

        <div class="popper-content hide">
            <p>
                <span> Alex</span>
                <a href="#" class="pull-right"></a>
            </p>
            <p>
                <span>Francis</span>
                <a href="#" class="pull-right"></a>
            </p>
            <p>
                <span>Mark</span>
                <a href="#" class="pull-right"></a>
            </p>
            <p>
                <span>Peter</span>
                <a href="#" class="pull-right"></a>
            </p>
        </div>
    </span>
</div>

But, if I click the button the popover is not getting displayed.

You can replace `$("[data-toggle=popover]").popover();` with `element.popover();` because `element` is already a jQuery object if jquery is loaded before angularjs. — Frank Adrian, May 03 '16 at 15:50

score 3 · Accepted Answer · edited May 23 '17 at 12:16

First, from my own experience I recommend using angular-bootstrap for things in that scope.

Second, if you really want it to work, make sure the bootstrap scripts are correctly loaded. Then try to listen to the click event with ng-click on the button and trigger the popover on it.

Here is the code to achieve what you want.

scope.popover = function() {
        $("[data-toggle=popover]").popover({
          html: true,
          content: $('.popper-content').html(),
          placement: attrs.popoverPlacement
        });
      };

Here is the html:

<button type="button" popover-placement="bottom" class="popper btn-link" popover ng-click="popover()" data-toggle="popover">
        4 Peoples
</button>

Here is the plunkr : https://plnkr.co/edit/fBPJ8LfOFGlgcCHvRWSM?p=preview

There are plenty way of achieving what you want. By the way I recommend you to read this : "Thinking in AngularJS" if I have a jQuery background?

Regards,

Popover not displaying in angular template

1 Answers1