Изменение цвета активной вкладки

Question

Незначительно новое для AngularJS, и я также использую Bootstrap CSS.

У меня есть главная страница, и я использую ngRoute для загрузки html-шаблонов. Я хочу активной вкладки навигации, чтобы изменить цвет, когда новый шаблон загружается

У меня есть что-то вроде

<div class="nav"> 
    <ul> 
     <li><a href="#/">HOME</a></li> 
     <li><a href="#about">ABOUT</a></li> 
     ..... 

$routeProvider 
    .when('/', { 
     templateUrl : 'home.html', 
     controller : 'mainCtrl', 
    }) 
    .when('/about', { 
     templateUrl : 'about.html', 
     controller : 'mainCtrl', 
    }) 

Я видел некоторые ответы, где вы динамически добавлять/удалять «активный» класс и да, что обработанное для меня, но я хочу пользовательский цвет.

Я генерирую случайный цвет и сохраняю его в $ scope.randomColor. Я хочу использовать этот цвет как активный цвет.

У меня есть директива, которая просто меняет цвет для активного и зависания. Хотелось бы, чтобы я мог просто добавить и удалить их для привязки тегов на основе той страницы, на которую смотрит пользователь.

.directive('ngHover', function() { 
    return { 
    restrict: 'A', 
    link: function(scope, element) { 
     element 
     .on('mouseenter',function() { 
      element.css('color', scope.backgroundColor); 
     }) 
     .on('mouseleave',function() { 
      element.css('color','#333'); 
     }); 
    } 
    } 
}) 
.directive('ngActive', function() { 
    return { 
    restrict: 'A', 
    link: function(scope, element) { 
     element.css('color', scope.backgroundColor); 
    } 
    } 
}); 

У кого-нибудь есть идея, как достичь того, что я хочу сделать? Кажется, это так легко сделать с JQuery, но я изучаю Angular, поэтому я хочу использовать это только по возможности.

Редактировать

Я попытался добавить «активный» метод класса, но и изменил цвет активного класса

var el = document.getElementsByClassName("active");  
var wrappedEl = angular.element(el); 
wrappedEl.css('color', $scope.backgroundColor) 

Это похоже на работу, но всякий раз, когда я иду на другую вкладку, активный класс удаляется из, но цвет остается тем же? странно ..

EDIT2

Ой, подождите, что онемел лол решаемые, добавив стиль вручную, как предложено здесь

Dynamically change a css class' properties with AngularJS

Answer 1

Использование ngstyle, здесь документация; https://docs.angularjs.org/api/ng/directive/ngStyle