Navbar工作但单击的元素未突出显示

Question

我用自耕农生成了一个AngularJS应用程序。导航栏工作，当我点击enw页面加载的元素时，单击的按钮不会突出显示。

这是导航栏代码

<div class="header">
  <div class="navbar navbar-default" role="navigation">
    <div class="container">
      <div class="navbar-header">

        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>

        <a class="navbar-brand" href="#!/">myApp</a>
      </div>

      <div class="collapse navbar-collapse" id="js-navbar-collapse">

        <ul class="nav navbar-nav">
          <li class="active"><a href="#!/">1</a></li>
          <li><a ng-href="#!/page2">2</a></li>
          <li><a ng-href="#!/page3">3</a></li>
          <li><a ng-href="#!/page4">4</a></li>
          <li><a ng-href="#!/page5">5</a></li>
          <li><a ng-href="#!/page6">6</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

Answer 1

有很多方法可以做到这一点。这里有一个

创建控制器并设置名为currentLink的var

//...
.controller('headerCtrl', function($scope){
    $scope.currentLink = 1;

    $scope.set = function(link){
           $scope.currentLink = link;
    }
});
//...

现在在你的html中修改你的代码如下：

<div class="header" ng-controller="headerCtrl">
<!--...-->

      <div class="collapse navbar-collapse" id="js-navbar-collapse">

        <ul class="nav navbar-nav">
          <li ng-class="{'active': currentLink == 1}"><a href="#!/" ng-click="headerCtrl.set(1);">1</a></li>
          <li ng-class="{'active': currentLink == 2}"><a ng-href="#!/page2" ng-click="headerCtrl.set(2);">2</a></li>
          <li ng-class="{'active': currentLink == 3}" ><a ng-href="#!/page3" ng-click="headerCtrl.set(3);">3</a></li>
          <li ng-class="{'active': currentLink == 4}"><a ng-href="#!/page4" ng-click="headerCtrl.set(4);">4</a></li>
          <!-- and so on-->
        </ul>
<!--...-->
</div>

通过ng-class这种方式，您可以从有效链接切换到每个链接，而使用ng-click时，您可以在点击时将该链接设置为有效;