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中。我想将这种颜色用作活动颜色。

我有一个指令只是改变活动和悬停的颜色。我希望我可以根据用户正在查看的页面添加和删除锚定标记。

.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，所以我想在可能的情况下使用它。

修改

我尝试添加'active'类方法，但也改变了活动类的颜色

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

更改活动标签的颜色

1 个答案: