谁能帮帮我。我被以下问题困扰。我有一个正常页面，其中导航栏激活了 scrollspy 。一切都很好，但我为导航栏创建了一个自定义指令，当我使用这个新的自定义指令加载导航栏时，ScrollSpy 和平滑滚动不起作用!
index.html:
<body ng-app="myApp" id="myPage" data-spy="scroll" data-target=".myScroll" data-offset="60">
<navigation-bar></navigation-bar>
</body>
Navigation-bar.html
<nav class="navbar navbar-default navbar-fixed-top myScroll" >
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.html#myPage">My Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html#services">Services</a></li>
<li><a href="index.html#about">About</a></li>
<li><a href="index.html#contact">Contact</a></li>
<li><a href="signup.html">Sign-up</a></li>
</ul>
</div>
</div>
</nav>
自定义指令
var app = angular.module("myApp", []);
app.directive("navigationBar", function(){
return {
restrict: 'E',
templateUrl: 'navigation-bar.html'
};
});
平滑滚动的 JS 文件
$(document).ready(function(){
$(".navbar a").on('click', function(event) {
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 1000, function(){
window.location.hash = hash;
});
}
});
最佳答案
我觉得有必要补充一点，这是一种向 Angular 应用程序添加滚动 spy 支持的有点古怪的方法，但遵循所有最佳实践的正确方法可能无法给出答案。
问题是当scrollspy插件初始化时页面还不包含导航栏。尝试从正文中删除 data-scrollspy 并将 scrollspy 初始化添加到指令的链接函数中
var app = angular.module("myApp", []);
app.directive("navigationBar", function(){
return {
restrict: 'E',
templateUrl: 'navigation-bar.html',
link: function() {
$('body').scrollspy({ target: '.myScroll', offset: 60 });
$(".navbar a").on('click', function(event) {
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 1000, function(){
window.location.hash = hash;
});
}
});
}
};
});
编辑:这个插件可以工作，即使有点击动画 http://plnkr.co/edit/2877Zf?p=preview
请注意，如果在运行时添加新链接，则 onclick 事件将对其不起作用，为此，您必须使用事件委托(delegate):
$("body").on('click', ".navbar a" ,function(event) {
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 1000, function(){
window.location.hash = hash;
});
}
});
关于javascript - Bootstrap 滚动 spy 以及 Angular 自定义指令，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41102122/