Загрузочный поповер не работает с ng-repeat

Question

Я кодирую виджет с помощью angularjs и сталкиваюсь с проблемой, когда мои всплывающие окна начальной загрузки не работают, когда внутри ng-repeat:

<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>

Что мне нужно добавить или отредактировать в моем коде, чтобы всплывающие окна действительно генерировали?

Answer 1

jQuery плохо работает с AngularJS из-за того, как AngularJS отображает его HTML. К счастью, BootstrapUI существует. Это набор директив, которые обрабатывают Bootstrap для вас.

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

Для вашего случая popoverВаш код будет выглядеть так:

<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>