2016-04-06 24 views
1

AngularJS için oldukça yeni ve ayrıca Bootstrap CSS kullanıyorum.Etkin sekmenin rengini değiştirme

Ana sayfam var ve html şablonları yüklemek için ngRoute kullanıyorum. Ben yeni şablon

her yüklendiğinde ben dinamik eklemek/'etkin' sınıfını kaldırmak bazı cevaplar gördüm

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

böyle bir şey var aktif navigasyon sekme rengini değiştirmek istiyorum ve bu işlenmiş evet Benim için ama özel renk istiyorum.

Rasgele bir renk oluşturup $ scope.randomColor olarak kaydediyorum. Bu rengi aktif renk olarak kullanmak istiyorum.

Etkin ve vurgulu renklerdeki renkleri değiştiren bir yönergem var. Keşke bir kullanıcının hangi sayfaya baktığını temel alan etiketler eklemek ve eklemek istiyorum.

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

Ne yapmak istediğimi nasıl elde edeceğimi bilen biri var mı? Jquery ile yapmak çok kolay görünüyor ama Açısal öğreniyorum, bu yüzden sadece mümkünse bunu kullanmak istiyorum.

Düzenleme

Ben 'etkin' sınıf yöntemi ekleme çalıştı ama aynı zamanda aktif sınıfın renk değiştirdi

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

Bu iş gibi görünüyor ama farklı sekmesine gidin her aktif sınıf kaldırılır ama renk aynı kalır? garip ..

EDIT2

Ah burada

Dynamically change a css class' properties with AngularJS

cevap

0

Kullanım ngstyle önerilen gibi aptal lol elle stil ekleyerek çözüldü olduğunu durun, buraya dokümantasyon olduğu; https://docs.angularjs.org/api/ng/directive/ngStyle

+0

Henüz ngstyle'e baktım ama bana nasıl yardımcı olabileceğinden emin değilim. – TKP

+0

Burada: http://stackoverflow.com/questions/24224753/changing-element-colour-on-hover-angularjs –

İlgili konular