javascript - 更改事件选项卡的颜色

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 中。我想使用该颜色作为事件颜色。

我有一个指令，只需更改事件和悬停的颜色。我希望我可以根据用户正在查看的页面添加和删除这些 anchor 标记。

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

这似乎有效，但每当我进入不同的选项卡时，事件类就会被删除，但颜色保持不变？奇怪..

编辑2

哦，等等，这太愚蠢了，哈哈通过手动添加样式解决了这个问题，就像这里建议的

Dynamically change a css class' properties with AngularJS

Answer 1

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