将弹出窗口放入 td答案

【问题标题】：Putting popover inside td将弹出窗口放入 td
【发布时间】：2017-01-29 05:44:21
【问题描述】：

我使用的是 Bootstrap 3.3.6，将弹出框放入 <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 代码来获取弹出框

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

【问题讨论】：

它有效。在 bootsnipp 上尝试了您的代码，它可以工作。 bootsnipp.com/snippets/86EyZ 如果您希望弹出框出现在悬停时（当前它在单击链接时出现 - 焦点）将焦点更改为悬停
不，实际上当我放在表外时它正在工作，但是当我在表标记内编写相同的代码时它不起作用。 @JapanGuy
bootsnipp.com/snippets/NjMqp 它在表格内工作。需要查看更多代码才能解决问题
复制粘贴你的代码，它工作。如果将data-trigger="focus" 更改为data-trigger="hover" 是否有效？
对我来说，一切都在表格 data-trigger="focus", "click","hover".but 里面没有解决问题。无法找到问题是否有问题是在表中还是 ng-repeat 或者出了什么问题，我不明白，在 bootsnip 中他们使用的是哪个版本的引导程序，iam 使用 3.3.6 这个版本有什么问题吗？ @JapanGuy

标签： javascript html angularjs twitter-bootstrap-3

【解决方案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 版本

【讨论】：