angularjs ui路由器:获取给定状态的子状态列表
您知道在ui路由器中获取给定状态的子状态列表的方法吗 我正在使用ui路由器实现一个复杂的SPA,可能有4级深度导航 我想为路由器表自动生成的第二级实现导航选项卡界面 为此,我需要获得给定状态(可能是抽象状态)的直接子级列表。我发现获取状态的唯一方法是执行angularjs ui路由器:获取给定状态的子状态列表,angularjs,angular-ui,angular-ui-router,Angularjs,Angular Ui,Angular Ui Router,您知道在ui路由器中获取给定状态的子状态列表的方法吗 我正在使用ui路由器实现一个复杂的SPA,可能有4级深度导航 我想为路由器表自动生成的第二级实现导航选项卡界面 为此,我需要获得给定状态(可能是抽象状态)的直接子级列表。我发现获取状态的唯一方法是执行$state.get()并获取完整的状态列表,但这意味着我必须自己解析子状态,我认为这是ui路由器中已经编写的代码 我把这个问题放在这里,以防有人在源代码方面有经验,或者知道一个插件或模块可以在这方面帮助我。同时,如果我发现了什么,我会自己做一个
$state.get()
并获取完整的状态列表,但这意味着我必须自己解析子状态,我认为这是ui路由器中已经编写的代码
我把这个问题放在这里,以防有人在源代码方面有经验,或者知道一个插件或模块可以在这方面帮助我。同时,如果我发现了什么,我会自己做一个研究,并发布结果。最后,我不得不自己实现这个功能 在具有选项卡界面的抽象路由的控制器中,使用正则表达式利用路由的默认命名约定过滤状态:
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;
我的路线定义有一个data
属性,该属性包含呈现选项卡所需的标题和其他元数据
我的模板如下所示(使用引导):
-
如果您使用,它允许您注册如下状态(从stateHelper自述文件):
希望这有帮助。我这样做更简单、更快:
var chillin = $state.get().filter(function(cState) { return cState.name.indexOf('parent.state.') === 0 });
我需要类似的东西,所以至少我知道我必须自己实现它。感谢您使用的提示和
$state.get()
来执行此操作?将检查。是的,这在某些情况下可能有用,但在我的特殊情况下,我从几个模块构建我的应用程序,因此每个控制器注册到它自己的模块,依此类推。然后我阅读所有路线,并用我的模块和操作创建一个导航菜单。导航菜单指令没有关于结构如何的线索,因此它需要非常通用。+1,最好使用本机数组方法而不是下划线或lodash。但是,您并没有过滤掉父路由,因此不仅仅是抓取子路由。要仅获取子路由,请添加if(cState.name==)return代码>
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'
});
});
angular.module('app')
.controller('TransportController', function($scope, $state) {
$scope.items = $state.current.children;
});
var chillin = $state.get().filter(function(cState) { return cState.name.indexOf('parent.state.') === 0 });