谁能帮我。我坚持以下问题。我有一个正常的页面，其中导航栏激活了scrollspy。一切都很好，但是我为导航栏创建了custom directive，并且当使用此新的自定义指令加载导航栏时，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应用程序添加scrollspy支持的方法，但是按照所有最佳做法正确地进行操作可能无法解决。
问题是，当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事件将对它们不起作用，为此，您必须使用事件委托：
$("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 - 引导滚动和 Angular 自定义指令，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41102122/