CODEWITHSUNDEEP
javascriptangularjstwitter-bootstrap
FlyingCat
FlyingCat

Reputation: 14250

Popover doesn't appear from directive added to view

I wanted to create a directive for the Bootstrap Popover feature.

Controller:

var app = angular.module('firstApp', ['ui.bootstrap']);

app.directive('popover', function() {
   return function(scope, elem) {
      console.log(elem)
      elem.popover({trigger: 'hover','placement': 'left'});
   }
})

HTML:

 <div class='content' ng-repeat ='item in items'>
     <button type="button" popover class="testBtn btn btn-default" data-container="body" data-toggle="popover" data-content="Vivamus sagittis." title='what?'>
        Popover on left
     </button>
 </div>

I don't see the log in my console and the popover feature doesn't work as expected.

Upvotes: 0

Views: 89

Answers (2)

Marc Kline
Marc Kline

Reputation: 9409

You are not setting the proper attributes on the element for UI Bootstrap Popover:

It should instead look like something like this:

<button type="button" class="testBtn btn btn-default" popover="Vivamus sagittis."
popover-trigger="click" popover-title='what?' popover-placement='left'>
   Popover on left
</button>

.. and you don't need to define your own directive as you've shown.

Demo

UI Bootstrap Docs

If instead you're looking to create your own directive (ie. not using UI Bootstrap), you need to add some significant pieces to what you've shown in your code. I assume that you actually aren't looking to do so based on the fact that you've injected 'ui.bootstrap' into your app, but, in any case, here is a demo showing how that might work.

Upvotes: 1

Ali Habibzadeh
Ali Habibzadeh

Reputation: 11558

You are missing some aspects of defining a directive. Try something like this to get a flexible popover:

app.directive('popover', function () {
    return {
        restrict: 'A',
        template: '<span>{{label}}</span>',
        link: function (scope, el, attrs) {
            scope.label = attrs.popoverLabel;

            el.popover({
                trigger: 'click',
                html: true,
                content: attrs.popoverHtml,
                placement: attrs.popoverPlacement
            });
        }
    };
});

But using 'ui.bootstrap' you should already have all this without needing to redefine this directive.

If the module is added correctly you should get your popover just by adding this:

popover-placement="left" popover="On the Top!"

Upvotes: 1

Related Questions