Ändern der Farbe der aktiven Registerkarte

Question

Ziemlich neu zu AngularJS und ich benutze auch Bootstrap CSS.

Ich habe eine Hauptseite und ich benutze ngRoute, um HTML-Vorlagen zu laden. Ich möchte die aktive Navigation Registerkarte Farbe ändern, wenn neue Vorlage

ich so etwas wie

<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', 
    }) 

ich einige Antworten gesehen habe geladen haben, in dem Sie dynamisch hinzufügen/entfernen ‚aktiv‘ Klasse und ja, die funktioniert für mich, aber ich möchte benutzerdefinierte Farbe.

Ich generiere eine zufällige Farbe und speichere sie in $ scope.randomColor. Ich möchte diese Farbe als aktive Farbe verwenden.

Ich habe eine Direktive, die einfach die Farbe für aktiv und Hover ändert. Ich wünschte, ich könnte diese einfach hinzufügen und entfernen, um zu verankern, welche Seite ein Benutzer betrachtet.

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

Jeder hat eine Idee, wie ich erreichen kann, was ich tun möchte? Es scheint so einfach zu sein mit Jquery, aber ich lerne Angular, also möchte ich das nur benutzen, wenn es möglich ist.

bearbeiten

Ich habe versucht, ‚aktive‘ Klassenmethode Hinzufügen sondern verändert auch die Farbe der aktiven Klasse

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

Dies scheint aber zu funktionieren, wenn ich zu anderen Tab gehen, wird aktive Klasse entfernt ab, aber die Farbe bleibt gleich? seltsam ..

EDIT2

Oh, das Warten war dumm lol es wurde gelöst durch Stil manuell hinzufügen, wie hier vorgeschlagen

Dynamically change a css class' properties with AngularJS

Answer 1

Verwenden ngstyle, hier ist die Dokumentation; https://docs.angularjs.org/api/ng/directive/ngStyle