アクティブなタブの色を変更する

Question

AngularJSには新しく、またブートストラップCSSも使用しています。

メインページがあり、HTMLテンプレートを読み込むためにngRouteを使用しています。 新しいテンプレートが

をロードされるたびに、私は私はあなたが動的に「アクティブ」クラスを追加/削除するいくつかの答えを見てきました、はいそれは働いていた私は

<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