CODEWITHSUNDEEP
javascriptjqueryangularjstwitter-bootstrap
Karthik
Karthik

Reputation: 470

Popover not displaying in angular template

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.

Upvotes: 0

Views: 2213

Answers (1)

tagkiller
tagkiller

Reputation: 340

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,

Upvotes: 3

Related Questions