Question

我正在使用angularjs编写一个小部件，并且我遇到了一个问题，我的引导程序在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>

我需要在代码中添加或编辑哪些内容才能实际生成弹出窗口？

Answer 1

由于AngularJS如何呈现其HTML，jQuery与AngularJS的搭配并不好。幸运的是，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>

bootstrap popover不适用于ng-repeat

1 个答案: