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
Henüz ngstyle'e baktım ama bana nasıl yardımcı olabileceğinden emin değilim. – TKP
Burada: http://stackoverflow.com/questions/24224753/changing-element-colour-on-hover-angularjs –