更改活动选项卡的颜色

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