我将应用程序从angular.js
迁移到Angular 5
..
应用程序使用bootstrap主题,它使用bootstrap v3.3.7
。我复制了每个css
和script
,奇怪的是popover
(用户下拉列表)不再适用于新的应用程序。
我尝试调试它,发现问题是$('[data-toggle="popover"]').data("bs.popover")
是undefined
。
$(document).on("click", '[data-toggle="popover"]', function (o) {
o.stopPropagation(),
$('[data-toggle="popover"]')
.data("bs.popover")
.tip()
.hasClass("in") ? (
$('[data-toggle="popover"]').popover("hide"),
$(document).off("click.app.popover")
) : (
$('[data-toggle="popover"]').popover("show"),
setTimeout(function () {
$(document).one("click.app.popover", function () {
$('[data-toggle="popover"]').popover("hide")
})
}, 1)
)
})
我的HTML:
<ul class="nav navbar-nav">
...
<li>
<button data-toggle="popover" data-original-title="" title="">
<img class="img" src="assets/images/img-1.jpg">
</button>
</li>
</ul>
点击button[data-toggle="popover"]
时,应显示以下html:
<ul class="nav navbar-nav hidden">
<li>
<a href="#/profile">
<span class="profile-link"></span> Profile
</a>
</li>
...
</ul>
有什么想法吗?
答案 0 :(得分:2)
它是undefined
,因为您在bs.popover
中没有html
作为数据属性,并且它正在尝试阅读不存在的data-bs.popover
如果您有<div data-foo="bar"></div>
,那么$('div').data('foo')
将输出栏
.data()
方法允许我们将任何类型的数据附加到DOM 元素以一种不受循环引用安全的方式,因此 从内存泄漏。
在ul
内显示popover
您需要将其放入data-content
属性中,然后添加data-html="true"
让popover知道它正在显示html
,
我不知道你想用.data()
.tip()
.hasClass()
等所有人做什么...当你可以用$().popover()
替换它时,这是一个有效的popover
:
$('[data-toggle="popover"]').popover();
/*
// this will work too
$(document).on("click", '[data-toggle="popover"]', function (o) {
o.stopPropagation(),
$('[data-toggle="popover"]')
.hasClass("in") ? (
$('[data-toggle="popover"]').popover("hide"),
$(document).off("click.app.popover")
) : (
$('[data-toggle="popover"]').popover("show"),
setTimeout(function () {
$(document).one("click.app.popover", function () {
$('[data-toggle="popover"]').popover("hide")
})
}, 1)
)
})
*/
button{
border: none;
background: none;
margin-top: 10px;
margin-left: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav navbar-nav">
<li>
<button
data-toggle="popover"
data-original-title=""
title=""
data-html="true"
data-content='<ul class="nav navbar-nav"><li><a href="#/profile"><span class="profile-link"></span> Profile</a></li></ul>'>
<img class="img" src="https://loremflickr.com/100/100">
</button>
</li>
</ul>