Угловое расположение пути для навигатора, не может изменить цвет.

Question

Я использую Angular $ location.path(), чтобы определить путь в моем блоге, который затем выделяет на навигационной панели, какой путь используется. Работа подсветки, за исключением того, что я хочу изменить цвет выделенного текста при использовании пути. В CSS ниже я попытался использовать: hover и: active, чтобы изменить цвет текста. Когда вы наводите курсор на ссылку пути в навигационной панели, цвет меняется, но когда вы нажимаете его, он начинает меняться в цвет, назначенный с помощью: active, но затем, когда вы перемещаете мышь, он возвращается к активному цвету по умолчанию. Есть предположения? Благодарю.

HTML - NavBar

<div ng-controller='NavbarCtrl'> 
    <div class="navbar navbar-default" role="navigation" id='navbar'> 
     <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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 id='headerTitle' class="navbar-brand" ng-href="#/">Teewinot</a> 
      </div> 
      <div class="collapse navbar-collapse"> 
       <ul class="nav navbar-nav"> 
        <li ng-class="{ active: isActive('#/portfolio')}"><a class='navSubHeadings' ng-href="#/portfolio">Portfolio</a></li> 
        <li ng-class="{ active: isActive('#/philosophy')}"><a class='navSubHeadings' ng-href="#/philosophy">Philosophy</a></li> 
        <li ng-class="{ active: isActive('#/about')}"><a class='navSubHeadings' ng-href="#/about">About The Partners</a></li> 
        <li ng-class="{ active: isActive('#/teewinot-blog')}"><a class='navSubHeadings' ng-href="#/teewinot-blog">Blog</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</div> 

CONTROLLER

angular.module('Teewinot').controller('NavbarCtrl', function($scope, $location) { 
    'use strict' 

    $scope.isActive = function (viewLocation) { 
     return viewLocation === $location.path(); 
    }; 
}); 

CSS

.navbar-default .navbar-nav > li > a { 
    color: red; 
} 
.navbar-default .navbar-nav > li > a:hover { 
    color: yellow; 
} 
.navbar-default .navbar-nav > li > a:active { 
    color: yellow; 
} 

Answer 1

Я думаю, вам нужно удалить хэш # от Вашего звонка до $ scope.isActive.

isActive('#/portfolio') 

Try изменения тех

isActive('/portfolio') 

Answer 2

Вы претендуете активный класс li

<li ng-class="{ active: isActive('#/portfolio')}"> 

Таким образом, вы должны иметь стиль для активного класса, как этот

.navbar-default .navbar-nav > li.active > a 

Ваш Строка CSS будет

.navbar-default .navbar-nav > li > a:active, .navbar-default .navbar-nav > li.active > a { 
    color: yellow; 
}