Angularjs 当子状态为活动时，如何使用ui路由器设置活动类

我有侧边栏和菜单中的一些项目。这是侧边栏的代码

<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
    <ul class="nav in" id="side-menu">
        <li ui-sref-active="sideActive">
            <md-button class="md-raised md-warn md-hue-2" ui-sref="dashboard.home"><i class="fa fa-dashboard fa-fw"></i> Dashboard</md-button>
        </li>
       <li ui-sref-active="sideActive">
            <md-button class="md-raised md-warn md-hue-2" ui-sref="dashboard.userManagement"><i class="fa fa-user"></i>  User </md-button>
        </li>
        <li  ui-sref-active-eq="sideActive" >
            <md-button ng-click="check(4)"  class="md-raised md-warn md-hue-2" ui-sref="dashboard.orderManagement.manage"><i class="fa fa-file-text-o"></i>  Order Management<span class="fa arrow"></span></md-button>
            <ul class="orderNav nav nav-second-level" collapse="collapseVar!=4">
                <li ng-class="{orderActive: $state.includes('order_management')}">
                    <md-button width="2" ui-sref="dashboard.orderManagement.manage" class="md-raised md-warn md-hue-2">Manage Orders</md-button>
                </li>
                <li  ng-class="{orderActive: $state.includes('order_management')}">
                    <md-button width="2" ui-sref="dashboard.orderManagement.payment.transfers" class="md-raised md-warn md-hue-2">Payment</md-button>
                </li>

            </ul>
        </li>
        <li ui-sref-active="sideActive">
            <md-button class="md-raised md-warn md-hue-2" ui-sref="dashboard.artManagement"><i class="fa fa-picture-o"></i>  Art Management</md-button>
        </li>

    </ul>
</div>
<!-- /.sidebar-collapse -->

---

怎么做，谁能帮我一下吗

您在列表子元素的ng class属性中给出了错误的状态。尝试使用下面的代码

<div class="navbar-default sidebar" role="navigation">
        <div class="sidebar-nav navbar-collapse">
            <ul class="nav in" id="side-menu">
                <li ui-sref-active="sideActive">
                    <md-button class="md-raised md-warn md-hue-2" ui-sref="dashboard.home"><i class="fa fa-dashboard fa-fw"></i> Dashboard</md-button>
                </li>
               <li ui-sref-active="sideActive">
                    <md-button class="md-raised md-warn md-hue-2" ui-sref="dashboard.userManagement"><i class="fa fa-user"></i>  User </md-button>
                </li>
                <li  ng-class="{orderActive: $state.includes('dashboard.orderManagement')}" >
                    <md-button ng-click="check(4)"  class="md-raised md-warn md-hue-2" ui-sref="dashboard.orderManagement.manage"><i class="fa fa-file-text-o"></i>  Order Management<span class="fa arrow"></span></md-button>
                    <ul class="orderNav nav nav-second-level" collapse="collapseVar!=4">
                        <li ui-sref-active="sideActive">
                            <md-button width="2" ui-sref="dashboard.orderManagement.manage" class="md-raised md-warn md-hue-2">Manage Orders</md-button>
                        </li>
                        <li  ui-sref-active="sideActive">
                            <md-button width="2" ui-sref="dashboard.orderManagement.payment.transfers" class="md-raised md-warn md-hue-2">Payment</md-button>
                        </li>
                        <li ui-sref-active="sideActive">
                            <md-button width="2" ui-sref="dashboard.orderManagement.pixum" class="md-raised md-warn md-hue-2">Pixum</md-button>
                        </li>
                    </ul>
                </li>
                <li ui-sref-active="sideActive">
                    <md-button class="md-raised md-warn md-hue-2" ui-sref="dashboard.artManagement"><i class="fa fa-picture-o"></i>  Art Management</md-button>
                </li>

            </ul>
        </div>

仪表板


使用者


订单管理


管理订单


付款


皮克斯姆




艺术管理

控制器代码：

 $stateProvider.state('dashboard.orderManagement', {
              url: '/order_management',
              abstract: true,
              template: '<div ui-view></div>'
            })
            .state('dashboard.orderManagement.manage', {
             templateUrl: 'submodules/order_management/manageOrder.html',
            url: '/manage_order',
            controller: 'orderCtrl',
            resolve: {
                loadMyFiles: function($ocLazyLoad) {
                    return $ocLazyLoad.load({
                        name: 'artifuAdmin',
                        files: [
                            'submodules/order_management/controller.js',
                            'scripts/services.js'
                        ]
                    })
                }
            }
            })
            .state('dashboard.orderManagement.pixum', {
               //content
            });

$stateProvider.state（'dashboard.orderManagement'{
url:“/订单管理”，
摘要：没错，
模板：“”
})
.state（'dashboard.orderManagement.manage'{
templateUrl:'submodules/order\u management/manageOrder.html'，
url:“/manage_order”，
控制器：“orderCtrl”，
决心：{
loadMyFiles:函数（$ocLazyLoad）{
返回$ocLazyLoad.load({
名称：'artifadmin'，
档案：[
'子模块/order_management/controller.js'，
“scripts/services.js”
]
})
}
}
})
.state（'dashboard.orderManagement.pixum'{
//内容
});

您在列表子元素的ng class属性中给出了错误的状态。尝试使用下面的代码

<div class="navbar-default sidebar" role="navigation">
        <div class="sidebar-nav navbar-collapse">
            <ul class="nav in" id="side-menu">
                <li ui-sref-active="sideActive">
                    <md-button class="md-raised md-warn md-hue-2" ui-sref="dashboard.home"><i class="fa fa-dashboard fa-fw"></i> Dashboard</md-button>
                </li>
               <li ui-sref-active="sideActive">
                    <md-button class="md-raised md-warn md-hue-2" ui-sref="dashboard.userManagement"><i class="fa fa-user"></i>  User </md-button>
                </li>
                <li  ng-class="{orderActive: $state.includes('dashboard.orderManagement')}" >
                    <md-button ng-click="check(4)"  class="md-raised md-warn md-hue-2" ui-sref="dashboard.orderManagement.manage"><i class="fa fa-file-text-o"></i>  Order Management<span class="fa arrow"></span></md-button>
                    <ul class="orderNav nav nav-second-level" collapse="collapseVar!=4">
                        <li ui-sref-active="sideActive">
                            <md-button width="2" ui-sref="dashboard.orderManagement.manage" class="md-raised md-warn md-hue-2">Manage Orders</md-button>
                        </li>
                        <li  ui-sref-active="sideActive">
                            <md-button width="2" ui-sref="dashboard.orderManagement.payment.transfers" class="md-raised md-warn md-hue-2">Payment</md-button>
                        </li>
                        <li ui-sref-active="sideActive">
                            <md-button width="2" ui-sref="dashboard.orderManagement.pixum" class="md-raised md-warn md-hue-2">Pixum</md-button>
                        </li>
                    </ul>
                </li>
                <li ui-sref-active="sideActive">
                    <md-button class="md-raised md-warn md-hue-2" ui-sref="dashboard.artManagement"><i class="fa fa-picture-o"></i>  Art Management</md-button>
                </li>

            </ul>
        </div>

仪表板


使用者


订单管理


管理订单


付款


皮克斯姆




艺术管理

控制器代码：

 $stateProvider.state('dashboard.orderManagement', {
              url: '/order_management',
              abstract: true,
              template: '<div ui-view></div>'
            })
            .state('dashboard.orderManagement.manage', {
             templateUrl: 'submodules/order_management/manageOrder.html',
            url: '/manage_order',
            controller: 'orderCtrl',
            resolve: {
                loadMyFiles: function($ocLazyLoad) {
                    return $ocLazyLoad.load({
                        name: 'artifuAdmin',
                        files: [
                            'submodules/order_management/controller.js',
                            'scripts/services.js'
                        ]
                    })
                }
            }
            })
            .state('dashboard.orderManagement.pixum', {
               //content
            });

$stateProvider.state（'dashboard.orderManagement'{
url:“/订单管理”，
摘要：没错，
模板：“”
})
.state（'dashboard.orderManagement.manage'{
templateUrl:'submodules/order\u management/manageOrder.html'，
url:“/manage_order”，
控制器：“orderCtrl”，
决心：{
loadMyFiles:函数（$ocLazyLoad）{
返回$ocLazyLoad.load({
名称：'artifadmin'，
档案：[
'子模块/order_management/controller.js'，
“scripts/services.js”
]
})
}
}
})
.state（'dashboard.orderManagement.pixum'{
//内容
});

使用过滤器添加类解决了我的问题
示例：

仪表板


用户管理


订单管理


管理订单


付款




艺术管理

使用过滤器添加类解决了我的问题
示例：

仪表板


用户管理


订单管理