Question

我有完全加载的bootstrap scrollspy，但是在使用Angular的鼠标悬停事件中，我有一些导航栏内容更改，并且这样做我从相关列表项中删除了活动类。在mouseleave上它会恢复，但活动类不会返回。如何正确地重新初始化scrollspy以使其回来，而不必再次滚动来进行重新定位？我尝试了刷新方法，但它没有用。

我的相关代码摘录：

HTML：

<body style="padding-top: 0px;" data-spy="scroll" ng-app="SpringMill">
<section id="intro" class="main style1 dark">
<!-- Header -->         
            <header ng-controller="MainController" ng-mouseleave="isOver=false" id="header">

                <!-- Logo -->
                    <h1 id="logo">Summer Mill</h1>
                    <a ng-mouseover="isOver=true" style="color:black;text-decoration:initial;" id="logoii" href="http://localhost/locations">Locations</a>

                <!-- Nav -->
                <nav id="nav">
                    <ul class="nav navbar-nav">
                        <li ng-repeat="headerLink in headerLinks">
                          <a ng-if="!isOver" ng-init="addActiveList()" href="#{{headerLink.text}}">{{headerLink.text}}</a>
                          <a ng-if="isOver" ng-init="removeActiveList()" href="#{{headerLink.alternativeText}}">{{headerLink.alternativeText}}</a>
                      </li>
                    </ul>
                </nav>

            </header>

角：

$scope.removeActiveList = function() {
    $(".active").removeClass("active"); 
  },

  $scope.addActiveList = function() {
    $('body').scrollspy({ target: '#nav' })
  };

如果不可能，我是否应该采取不同的措施，例如尝试隐藏活动类，然后根据isOver的状态将其恢复？

Answer 1

好吧，事实证明我通过使用jquery来创建一个中间类来解决这个问题。

$scope.removeActiveList = function() {
        $(".active").addClass("tobeactive");
        $(".active").removeClass("active");         
      },

      $scope.addActiveList = function() {
        $(".tobeactive").addClass("active");
        $(".tobeactive").removeClass("tobeactive"); 
      };

删除活动类后初始化Bootstrap Scrollspy

1 个答案: