更改活动标签的颜色

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，所以我想在可能的情况下使用它。

编辑

我尝试添加'active'类方法，但也改变了活动类的颜色

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

这似乎工作，但每当我去不同的选项卡，活动类被删除但颜色保持不变？ 奇怪的..

EDIT2

哦等等，这是愚蠢的大声笑解决它通过手动添加样式像这里建议

使用AngularJS动态更改css类的属性

Answer 1

使用ngstyle，这是文档; https://docs.angularjs.org/api/ng/directive/ngStyle