表中有几个悬停后，Bootstrap popover停止-Java 学习之路

我有一个动态行数的表 . 我希望将鼠标悬停在每行的某个元素上 . 但是，当我加载页面时，弹出窗口工作的前几（3-6？）次，然后弹出窗口完全消失 .

<div class="container">
              <table class="table" style="width:20%">
                    <tr ng-repeat="game in games.mlb">
                          <td>
                                {{ game.awayTeam }} <br> {{ game.homeTeam }}
                          </td>
                          <td>
                                {{ game.awayScore }} <br> {{ game.homeScore }}
                          </td>
                          <td>
                                <span data-toggle="popover" 
                                data-trigger="hover" 
                                data-content="Some content" 
                                style="float: right"> {{ game.status}} </span>
                          </td>
                    </tr>
              </table>
        </div>

这是表的代码 . 正如您所看到的，我正在尝试将鼠标悬停应用于表格每行第三列中的动态文本 . 当我加载页面时，这有效一段时间 . 直到它......没有 .

这是jquery：

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

1 回答

1
ng-repeat 与 $(document).ready 不兼容，因为无法保证在加载整个 ng-repeat 之前 $(document).ready 调用 .

这实际上将问题转化为更多的Angular问题（可以通过使用 ng-repeat 来确定）来自Bootstrap问题 . 由于在 ng-repeat 循环结束时没有回调，因此您可以使用指令 .

这将是您的表行的HTML：
```
<tr ng-repeat="game in games.mlb" my-repeat-directive>
  
</tr>
```
这将是您关联的Javascript：
```
angular.module('myApp', [])
.directive('myRepeatDirective', function() {
  return function(scope, element, attrs) {
    // set your popovers per row element
  };
})
```
回复于 2024-04-28T13:19:42+08:00

表中有几个悬停后，Bootstrap popover停止

1 回答

相关问题