gpt4 book ai didi

javascript - 将 popover 放入 td

转载 作者:行者123 更新时间:2023-12-01 17:41:59 25 4
gpt4 key购买 nike

我正在使用 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代码

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

最佳答案

我知道这个问题不久前有人问过,但对于遇到麻烦的人,我认为问题是 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 版本

关于javascript - 将 popover 放入 td,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39608677/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com