Bootstrap popover在表中悬停几次后停止

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问题转变为角度问题(可以通过使用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
  };
})