Using Angular inside of a bootstrap popover

Question

I'm trying to create a table inside a Bootstrap popover that has an ng-repeat to make the rows but it seems like the angular is failing and I'm not sure why.

HTML:

<a  id="showDays"
    type="button"
    class="btn btn-success btn-xs pull-right"
    data-toggle="popover"
    data-placement="left"
    data-html="true"
    title="Popover title"
    data-content=
    '<table class="table table-condensed">
       <tbody>
         <tr ng-repeat="d in days">
           <td>{{d}}</td>
         </tr>
       </tbody>
     </table>'>
      <i class="fa fa-clock-o fa-lg"></i>
</a>
<script type="text/javascript" >
  $('#showDays').popover();
</script>

Controller:

$scope.days = [
  'Sunday',
  'Monday',
  'Tuesday',
  'Wednesday',
  'Thursday',
  'Friday',
  'Saturday'
];

The result is that the popover body has one row that is empty. Any help is appreciated. Thank you!

Why dont you use angular ui bootstrap and do it the angular way — PSL
– PSL, Commented Sep 4, 2014 at 0:42
Apparently this isn't supported in ui bootstrap. github.com/angular-ui/bootstrap/issues/220 — Elementary
– Elementary, Commented Sep 4, 2014 at 2:30
One of the biggest problems with the ui-bootstrap project is that they don't support custom templating on their directives. — Bob Barker
– Bob Barker, Commented Sep 4, 2014 at 18:35

PSL · Accepted Answer · 2014-09-04 03:28:14Z

4

Seems like probably what you are trying to achieve is not yet supported in angular version, you can instead create a directive of your own and do something like this;-

.directive('popover', function($compile, $timeout){
  return {
    restrict: 'A',
    link:function(scope, el, attrs){
      var content = attrs.content; //get the template from the attribute
      var elm = angular.element('<div />'); //create a temporary element
      elm.append(attrs.content); //append the content
      $compile(elm)(scope); //compile 
      $timeout(function() { //Once That is rendered
        el.removeAttr('popover').attr('data-content',elm.html()); //Update the attribute
        el.popover(); //set up popover
       });
    }
  }
})

and in your popover html add the directive attribute popover:-

 <a popover  id="showDays"
    type="button"
    class="btn btn-success btn-xs pull-left"
    data-toggle="popover"
    data-placement="right"
    data-html="true"
    title="Popover title"
    data-content=
    '<table class="table table-condensed">
       <tbody>
         <tr ng-repeat="d in days">
           <td ng-bind="d"></td>
         </tr>
       </tbody>
     </table>'>
      <i class="fa fa-clock-o fa-lg">Click me</i>
  </a>

Demo

Making it bit more configurable, pass the settings, Demo:-

edited Sep 4, 2014 at 3:28

answered Sep 4, 2014 at 3:12

PSL

124k21 gold badges257 silver badges243 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Elementary Over a year ago

Thanks for the demo! Could you clarify why you need to use ng-bind="d" instead of {{d}} in the <td> tags?

PSL Over a year ago

@Elementary not much in this case, generally i prefer using ng-bind against {{}}

Elementary Over a year ago

I mean that I tried to use {{d}} instead of ng-bind but it doesn't work. Why is this? I ask because I would like to do <td>{{d}}:</td>. I can do it by doing <td><span ng-bind="d"></span>:</td> I know but I'm just curious

jsruok Over a year ago

Interesting. Using ng-bind fixed my issue. Thanks! :-)

jenryb Over a year ago

This is old... but is there a way to do this without jQuery?

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

You can make this work out of the box using angular-strap popovers.

Angular Strap Project

Angular Strap is native bootstrap directives done right. So basically it would look like this:

HTML for calling/activating popover

<a  id="showDays"
type="button"
class="btn btn-success btn-xs pull-right"
data-trigger="hover" //i wasn't sure what trigger you wanted
ng-model="days"
data-placement="left"
data-html="true"
title="Popover title" //optional
data-template="file-path/to-local-HTML-template.html"
bs-popover>
</a>

pop over template

    <div class="popover" tabindex="-1">
    <div class="arrow"></div>
    <h3 class="popover-title" ng-bind-html="title">Your Title</h3>
    <div class="popover-content">
       <table class="table table-condensed">
           <tbody>
               <tr ng-repeat="d in days">
                   <td ng-bind="d"></td>
               </tr>
           </tbody>
       </table>'>
  <i class="fa fa-clock-o fa-lg">Click me</i>
    </div>
</div>

If that doesn't work it should be 99.9% there and it shouldn't take too much effort to fill in the gaps by looking at angular strap's documentation. They have great docs. The strap project also has great implementations for most of the rest of the boostrap 3 components.

Plukr using the above code for popover demo

Like I said that code up there is like 99% there, but just to go the extra mile I did up a plunk demo to show exactly how it's done.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Sep 4, 2014 at 3:29

Bob Barker

2361 silver badge9 bronze badges

2 Comments

Elementary Over a year ago

Angular Strap does look like a good project but I tried for a couple hours to get this to work but I couldn't :( I may try again later.

Bob Barker Over a year ago

I had a minor typo in the HTML for the bs-popover directive where I forgot to close the a tag. I'm adding a plunkr to my original post on how to do this.

Collectives™ on Stack Overflow

Using Angular inside of a bootstrap popover

2 Answers 2

5 Comments

HTML for calling/activating popover

pop over template

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

HTML for calling/activating popover

pop over template

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related