Navbar工作，但點擊元素不突出顯示

Question

我與yeoman生成了一個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這樣

//... 
.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你點擊時設置該鏈接爲活動;