Question

我希望在活动时更改 li 元素的 background-color 和 color 。下面是我的html页面，html页面中有链接到js文件中的状态。如何使用 ui-更改 li 的范围和整个背景的颜色SREF活性

＆＃13;

.state ('home', {
            url: "/home",
            abstract: true,
            templateUrl:"app/templates/home.html",
            controller: "WallCtrl"
      })
      .state('home.updates', {
          url: "/updates",
          views: {
              'menuContent': {
                  templateUrl: "app/templates/updates.html"
                 
              }
          }
      })

      .state('home.discover', {
          url: "/discover",
          views: {
              'menuContent':{
                  templateUrl: "app/templates/discover.html",
                  controller: "DiscoverCtrl"
              }
          }
      })


 .state('MyFollowList',{
          url:'/myfollowlist',
          templateUrl:'app/templates/myfollow.html',
          controller: 'MyFollowCtrl',
          resolve: {
              product_list: function ($http, ApiService, $log) {
                  $log.log("url entered :"+ url)
                  var result = $http.get(url+ ApiService.get_url('get_list')).success(function (data) {
                      $log.log("data resolved: "+ JSON.stringify(data))
                      return data;
                  }).error(function (err) {
                      $log.log(err)
                      return err;
                  });
                return result;
              }
          }
      })

＆＃13;

.activeClass{
    background:rgb(251,251,251);;
    color:rgb(217,52,7);
}

＆＃13;

<div class="lists">
     <ul list-style-type="none" class="user_Lists">
       <li class="item" menu-close  ui-sref-active="activeClass"><a ui-sref="home.updates">            <div class="HomeiconImg"></div><span>Home</span> </a></li>
       <li class="item" menu-close ui-sref-active="activeClass"><a ui-sref="home.discover">            <div class="DiscovericonImg"></div><span> Discover</span></a></li>
       <li class="item" menu-close ui-sref-active="activeClass"><a ui-sref="#">
           <div class="ActivityiconImg"></div> <span>My Activity</span></a></li>
       <li class="item"menu-close  ui-sref-active="activeClass" ><a ui-sref="MyFollowList">            <div class="FollowiconImg"></div><span>My Follow List </span></a></li>
       <hr>
       <li class="item" menu-close><a href="#">Invite Friends</a></li>
       <li class="item"menu-close><a href="#">Mock Search</a></li>
       <li class="item" menu-close><a href="#">Logout </a></li>
                   </ul>

＆＃13;

Answer 1

我是新手。但是在做R＆amp; d的时候得到了这个请看一下，有一个与此相关的讨论。

Angular-ui-router: ui-sref-active and nested states

希望它对您有所帮助。

Answer 2

我想github Issue已经解决了这个问题，因为它不适用于抽象和子状态。

对于替代解决方案，您可以查看。

Stackoverflow this question。

它使用一种方法来解决问题

在视图中： -

ng-class="{activeClass: $state.includes('posts')}"

在控制器中： -

$scope.$state = $state;

Answer 3

您可以动态检查类，并在hasClass的帮助下添加样式 - 完整参考 http://docs.angularjs.org/api/angular.element

使用ui-sref-active更改li的背景和颜色

3 个答案: