javascript - Bootstrap 弹出窗口在表格中悬停几次后停止

Question

我有一个包含动态行数的表。我希望在悬停在每一行的某个元素上时出现一个弹出窗口。但是，当我加载页面时，弹出窗口会在前几次(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>

Answer 1

ng-repeat 不适用于 $(document).ready，因为不能保证 $(document).ready 调用将在加载整个 ng-repeat 之前进行。

这实际上将问题从 Bootstrap 问题变成了更多的 Angular 问题(可以通过使用 ng-repeat 来确定)。由于 ng-repeat 循环结束时没有回调，您可以改用指令。

这将是您表格行的 HTML:

<tr ng-repeat="game in games.mlb" my-repeat-directive>
  <!-- things go here -->
</tr>

这将是您关联的 Javascript:

angular.module('myApp', [])
.directive('myRepeatDirective', function() {
  return function(scope, element, attrs) {
    // set your popovers per row element
  };
})