如何在子状态处于活动状态时使用 ui-router 设置活动 class
how to set active class using ui-router when children state is active
我有侧边栏,菜单中有一些项目。这是侧边栏的代码
<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 -->
在上面的代码中,对于订单管理,有子菜单项,在该子菜单项中,对于其中一个子项,还有另一个子项(将显示在主视图而不是侧栏中)。
例如:在 1) 订单管理-->I) 付款 II) 退款中说
|
i) 转移 ii) 收入
当查看收入或转账或付款时,订单管理应该是 active.i am getting url http://localhost:8080/admin/#/dashboard/order_management/payment/transfer
like this for transfer.但是对于那些按钮,我无法在点击传输时将其设置为活动 class。
这是州代码之一。
.state('dashboard.orderManagement.manage', {
templateUrl: 'submodules/order_management/manageOrder.html',
url: '/manage_order',
controller: 'orderCtrl',
resolve: {
loadMyFiles: function($ocLazyLoad) {
return $ocLazyLoad.load({
name: 'abcd',
files: [
'submodules/order_management/controller.js',
'scripts/services.js'
]
})
}
}
})
怎么做,谁能帮帮我
您在列表子元素的 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
});
使用过滤器添加 class 解决了我的问题。
示例:<li ng-class="{sideActive: ('dashboard.orderManagement' | includedByState)}" >
<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 Management</md-button>
</li>
<li ng-class="{sideActive: ('dashboard.orderManagement' | includedByState)}" >
<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="orderActive">
<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: ('dashboard.orderManagement.payment' | includedByState)}">
<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 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 -->
在上面的代码中,对于订单管理,有子菜单项,在该子菜单项中,对于其中一个子项,还有另一个子项(将显示在主视图而不是侧栏中)。
例如:在 1) 订单管理-->I) 付款 II) 退款中说
|
i) 转移 ii) 收入
当查看收入或转账或付款时,订单管理应该是 active.i am getting url http://localhost:8080/admin/#/dashboard/order_management/payment/transfer
like this for transfer.但是对于那些按钮,我无法在点击传输时将其设置为活动 class。
这是州代码之一。
.state('dashboard.orderManagement.manage', {
templateUrl: 'submodules/order_management/manageOrder.html',
url: '/manage_order',
controller: 'orderCtrl',
resolve: {
loadMyFiles: function($ocLazyLoad) {
return $ocLazyLoad.load({
name: 'abcd',
files: [
'submodules/order_management/controller.js',
'scripts/services.js'
]
})
}
}
})
怎么做,谁能帮帮我
您在列表子元素的 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
});
使用过滤器添加 class 解决了我的问题。
示例:<li ng-class="{sideActive: ('dashboard.orderManagement' | includedByState)}" >
<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 Management</md-button>
</li>
<li ng-class="{sideActive: ('dashboard.orderManagement' | includedByState)}" >
<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="orderActive">
<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: ('dashboard.orderManagement.payment' | includedByState)}">
<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>