Question

我正在使用Bootstrap 3.3.6，将popover放在<td>中会出现问题。那么请你能帮我解决这个问题吗？

这是我的HTML代码。

<html>
  <table class="table table-hover table-bordered table-responsive">
    <thead>
      <tr>
        <th>Url</th>
        <th>Content status</th>
      </tr>
    </thead>
    <tr data-ng-repeat="ConfigurationData in crawlConfigurationData">
      <td>
        <a class="col-sm-7" href="" data-ng-click="getContent(ConfigurationData)">{{ConfigurationData.url}}</a>
      </td>
      <td>
        <a href="" data-toggle="popover" title="Popover Header" data-placement="right" data-trigger="focus" data-content="Some content inside the popover">Toggle popover</a>
      </td>
    </tr>
  </table>

</html>

下面是我的javascript代码来获取popover

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

Answer 1

我知道这个问题是在不久前提出的，但是对于遇到麻烦的人，我认为问题是ng-repeat，即使运行$(document).ready(function(){$('[data-toggle = "popover"]').popover();});时运行document时，其中的元素ng-repeat尚未加载。我使用指令来解决此问题，使用上面的示例，它将看起来像这样：

    <html>
  <table class="table table-hover table-bordered table-responsive">
    <thead>
      <tr>
        <th>Url</th>
        <th>Content status</th>
      </tr>
    </thead>
    <tr data-ng-repeat="ConfigurationData in crawlConfigurationData" load-popover>
      <td>
        <a class="col-sm-7" href="" data-ng-click="getContent(ConfigurationData)">{{ConfigurationData.url}}</a>
      </td>
      <td>
        <a href="" data-toggle="popover" title="Popover Header" data-placement="right" data-trigger="focus" data-content="Some content inside the popover">Toggle popover</a>
      </td>
    </tr>
  </table>

</html>

我的指令：

.directive('loadPopover', function() {
  return function(scope, element, attrs) {
    if(scope.$last){
      $('[data-toggle="popover"]').popover({
        placement : 'top',
    })
    }
  };
})

虽然正确的方法是使用UI-Bootstrap，但似乎不支持更新的Bootstrap / AngularJS版本

把popover放在td里面

1 个答案: