CODEWITHSUNDEEP
jqueryangularjstwitter-bootstrapangularjs-ng-repeatbootstrap-popover
Dave
Dave

Reputation: 1277

bootstrap popover doesn't work with ng-repeat

I'm coding a widget using angularjs and am running into an issue where my bootstrap popovers don't work when inside ng-repeats:

<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover(); 

    $('.popover-dismiss').popover({
        trigger: 'focus'
        })
});
</script>

<div class="panel panel-default">

    <div class="panel-heading">
        <span class="panel-title"><i class="fa fa-{{c.glyph}}" aria-hidden="true"></i>&nbsp; {{c.title}}</span>
    </div>

  <div class="panel-body" ng-if="c.data.loading">

    <span><i class="fa fa-spinner fa-spin fa-3x fafw"></i>
      <span class="sr-only">Loading...</span>
    </span>

  </div>

    <div class="panel-body" ng-if="!c.data.loading">

    <div class="row">
      <div class="col-xs-12">

        <h5><i class="fa fa-info" aria-hidden="true"></i>&nbsp; ${UPCOMING DATES}</h5>
        <div class="list-group">
          <span  class="list-group-item"
                 ng-repeat="item in c.dates | orderBy:'date' track by $index" 
                 ng-if="item.displayList=='true' && item.futureDate">
            <li class="rowflex" style="list-style: none;">
              <div class="colflex">              
                    <strong><i class="fa fa-calendar" aria-hidden="true"></i>&nbsp; {{item.date}}</strong>
                <p>{{item.date_name}}</p>
              </div>
              <a tabindex="0" class="glyphicon glyphicon-question-sign" 
                 role="button" data-toggle="popover"
                 data-placement="right" data-trigger="focus" title="test"
                 data-content="test"/>  
            </li>
          </span>
            </div>
          <div>
    </div>
  </div>
</div>

What do I have to add or edit in my code in order for the popovers to actually generate?

Upvotes: 0

Views: 669

Answers (1)

koralarts
koralarts

Reputation: 2112

jQuery doesn't play well with AngularJS because of how AngularJS renders its HTML. Luckily, BootstrapUI exists. It's a set of directives that handles Bootstrap for you.

https://angular-ui.github.io/bootstrap/

For your case, popover, your code will be like so:

<a uib-popover tabindex="0" class="glyphicon glyphicon-question-sign" 
   role="button" popover-placement="right" popover-trigger="focus"
   title="test" popover-title="test">test</a>

Upvotes: 2

Related Questions