Question

任何人都可以帮助我。我坚持以下问题。我有一个正常的页面，其中为导航栏激活了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>

导航-一个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;
            });
        }
});

Answer 1

我觉得有必要补充一点，这是一种向一个Angular应用程序添加scrollspy支持的有点hacky方式，但是按照所有最佳实践正确地执行它可能对于答案来说太过分了。

问题是，当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;
    });
  }
});

Bootstrap scrollspy和angular custom-directive

1 个答案: