引导弹出框不适用于 ng-repeat

Posted 2023-05-09

【中文标题】引导弹出框不适用于 ng-repeat

【英文标题】：bootstrap popover doesn't work with ng-repeat

【发布时间】：2017-12-26 20:00:41

【问题描述】：

我正在使用 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>

我必须在代码中添加或编辑什么才能真正生成弹出框？

【参考方案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>

【讨论】：

谢谢！我从这个 CDN 加载了依赖项：cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/… 并应用了你的 代码，但它仍然不起作用。

您是否将它导入到您的 Angular 应用程序中？ angular.module('myModule', ['ui.bootstrap']);