Do you know a way in ui-router to get the list of child states of a given state?
你知道ui-router中的一种方法来获取给定状态的子状态列表吗?
I'm implementing a complex SPA with maybe 4 level deep navigation using ui-router.
我正在用ui-router实现一个包含4级深度导航的复杂SPA。
I would like to implement a navigation tab interface for the second level generated automatically from the router table.
我想为从路由器表格中自动生成的第二层实现一个导航标签界面。
For that, I need to get the list of direct children of a given state (maybe is an abstract state). The only way that I've found to get the states is to do a $state.get()
and obtain the full list of states, but that means that I'll have to parse child states on my own, and I think that's code already written in ui-router.
为此,我需要获得给定状态(可能是抽象状态)的直接子状态的列表。我发现获得状态的唯一方法是执行$state.get()并获得状态的完整列表,但这意味着我必须自己解析子状态,我认为这是已经用ui-router编写的代码。
I let this question here in case there's anyone with experience in the source code or know of a plugin or module that can help me on this. Meanwhile I will do a research on my own and post results if I find something.
如果有人在源代码中有经验,或者知道一个插件或模块可以帮助我解决这个问题,我就在这里提出这个问题。同时我会自己做一个调查,如果我发现了什么,我会把结果贴出来。
3 个解决方案
#1
8
I did this which is easier and faster:
我做的越来越简单,越来越快:
var chillin = $state.get().filter(function(cState) { return cState.name.indexOf('parent.state.') === 0 });
#2
5
In the end, had to implement the functionality myself.
最后,我必须亲自实现这个功能。
In the controller of the abstract route that has the tab interface, filtered the states using a regular expression taking advantage of the default naming convention for routes:
在具有选项卡接口的抽象路由控制器中,利用路由的默认命名约定,使用正则表达式过滤状态:
var routeName='Root.Parent'; // this is the "actual" route
// this regex is going to filter only direct childs of this route.
var secondRouteOnlyRegex = new RegExp(routeName + "\.[a-z]+$", "i");
var states = $state.get();
// this uses lodash to filter the states based on the regex
var navLinks = _.filter(states, (s) => {
return secondRouteOnlyRegex.test(s.name) && !s.abstract;
});
$scope.tabs = navlinks;
My route definitions have a data
property that contains the title and other metadata needed to render the tabs.
我的路由定义有一个数据属性,该属性包含用于呈现选项卡的标题和其他元数据。
My template looks something like this (using bootstrap):
我的模板是这样的(使用bootstrap):
<ul class="nav nav-tabs">
<li ng-repeat="state in tabs" ui-sref-active="active">
<a href="{{state.url}}" ui-sref="{{state.name}}">{{state.data.title}}</a>
</li>
</ul>
#3
2
If you use stateHelper, it enables you to register states like this (from the stateHelper readme):
如果您使用stateHelper,则可以注册如下状态(来自stateHelper readme):
angular.module('myApp', [ 'ui.router', 'ui.router.stateHelper' ])
.config(function(stateHelperProvider){
stateHelperProvider
.state({
name: 'root',
templateUrl: 'root.html',
children: [
{
name: 'contacts',
template: '<ui-view />',
children: [
{
name: 'list',
templateUrl: 'contacts.list.html'
}
]
},
{
name: 'products',
templateUrl: 'products.html',
children: [
{
name: 'list',
templateUrl: 'products.list.html'
}
]
}
]
})
.state({
name: 'rootSibling',
templateUrl: 'rootSibling.html'
});
});
In your navigation controller you can then use the children
attribute on the "root" state. For instance, I'm using this to display all children of the current state:
在导航控制器中,您可以使用“root”状态的children属性。例如,我使用它来显示当前状态的所有子元素:
angular.module('app')
.controller('TransportController', function($scope, $state) {
$scope.items = $state.current.children;
});
Hope this helps.
希望这个有帮助。
#1
8
I did this which is easier and faster:
我做的越来越简单,越来越快:
var chillin = $state.get().filter(function(cState) { return cState.name.indexOf('parent.state.') === 0 });
#2
5
In the end, had to implement the functionality myself.
最后,我必须亲自实现这个功能。
In the controller of the abstract route that has the tab interface, filtered the states using a regular expression taking advantage of the default naming convention for routes:
在具有选项卡接口的抽象路由控制器中,利用路由的默认命名约定,使用正则表达式过滤状态:
var routeName='Root.Parent'; // this is the "actual" route
// this regex is going to filter only direct childs of this route.
var secondRouteOnlyRegex = new RegExp(routeName + "\.[a-z]+$", "i");
var states = $state.get();
// this uses lodash to filter the states based on the regex
var navLinks = _.filter(states, (s) => {
return secondRouteOnlyRegex.test(s.name) && !s.abstract;
});
$scope.tabs = navlinks;
My route definitions have a data
property that contains the title and other metadata needed to render the tabs.
我的路由定义有一个数据属性,该属性包含用于呈现选项卡的标题和其他元数据。
My template looks something like this (using bootstrap):
我的模板是这样的(使用bootstrap):
<ul class="nav nav-tabs">
<li ng-repeat="state in tabs" ui-sref-active="active">
<a href="{{state.url}}" ui-sref="{{state.name}}">{{state.data.title}}</a>
</li>
</ul>
#3
2
If you use stateHelper, it enables you to register states like this (from the stateHelper readme):
如果您使用stateHelper,则可以注册如下状态(来自stateHelper readme):
angular.module('myApp', [ 'ui.router', 'ui.router.stateHelper' ])
.config(function(stateHelperProvider){
stateHelperProvider
.state({
name: 'root',
templateUrl: 'root.html',
children: [
{
name: 'contacts',
template: '<ui-view />',
children: [
{
name: 'list',
templateUrl: 'contacts.list.html'
}
]
},
{
name: 'products',
templateUrl: 'products.html',
children: [
{
name: 'list',
templateUrl: 'products.list.html'
}
]
}
]
})
.state({
name: 'rootSibling',
templateUrl: 'rootSibling.html'
});
});
In your navigation controller you can then use the children
attribute on the "root" state. For instance, I'm using this to display all children of the current state:
在导航控制器中,您可以使用“root”状态的children属性。例如,我使用它来显示当前状态的所有子元素:
angular.module('app')
.controller('TransportController', function($scope, $state) {
$scope.items = $state.current.children;
});
Hope this helps.
希望这个有帮助。