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

네비게이션 바에 코드를입니다.

<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> 

이 방법으로을 : 여기에 그들 중 하나

가 컨트롤러를 생성하고 설정이있는 VAR는 다음과 같이 코드를 수정하여 HTML에서 지금이

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

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

같은 currentLink라고 ng-class 클릭하면 모든 링크가 활성 또는 비활성으로 전환되고 ng-click과 함께 해당 링크가 활성으로 설정됩니다.