将弹出窗口放入 td
Posted
技术标签:
【中文标题】将弹出窗口放入 td【英文标题】：Putting popover inside 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 如果您希望弹出框出现在悬停时（当前它在单击链接时出现 - 焦点）将焦点更改为悬停 不，实际上当我放在表外时它正在工作，但是当我在表data-trigger="focus" 更改为data-trigger="hover" 是否有效？
对我来说，一切都在表格 data-trigger="focus", "click","hover".but 里面没有解决问题。无法找到问题是否有问题是在表中还是 ng-repeat 或者出了什么问题，我不明白，在 bootsnip 中他们使用的是哪个版本的引导程序，iam 使用 3.3.6 这个版本有什么问题吗？ @JapanGuy
【参考方案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 版本
【讨论】：
以上是关于将弹出窗口放入 td的主要内容，如果未能解决你的问题，请参考以下文章