Navbarは動作しますが、強調表示されていない要素をクリックしました

Question

私はyeomanでAngularJSアプリケーションを生成しました。 navbarが動作し、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

です。ここではそのうちの一つ

がコントローラを作成し、VARを設定している。このようにコードを修正し、あなたのhtmlになりましcurrentLink

このような

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

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

と呼ば：

<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をクリックするとそのリンクがアクティブに設定されます。