我有一个包含3列的应用页面.中间列是主要活动,并始终显示.双面列是小部件列表,它们具有自己的控制器和状态,并且可以是隐藏的或不被隐藏的,并且在其中也有多个视图.理想情况下,我会想像一下这样的url路由,如下所示：
/ app – 主要活动显示,两个面板都隐藏
/ app / 1234 – 显示主要活动,但显示1234实体的信息
/ app / 1234 / leftpanel – 主要活动显示为1234实体,左面板打开
/ app / 1234 / leftpanel / list – 主要活动显示为1234实体,左侧面板显示列表视图
/ app / leftpanel / list – 主动显示默认状态,leftpanel仍然显示列表
是否可以使用ui-router进行设置？我看过这个例子：
https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions
它显示了如何在多个模块之间使用$stateProvider,但是我仍然没有看到如何使这个场景工作 –
我确实解决了这个问题.我也发表了关于这个角色的ui github,他们的回应基本上是,“那么这种情况并不是路由器设计的,所以如果你想”fancier“状态管理,把数据放在参数并自己看看他们,实现你需要的任何逻辑“.我有点觉得这是ui路由器设计的,所以我扩展了一点(没有源代码改变)来完成这个.解决方案是抽象状态,假的“关闭”状态,路由器url中的参数以及扩展$urlRouterProvider服务的组合.
首先扩展$urlRouterProvider：
urlRouterProvider.when(/^((?!leftpanel).)*$/,['$state','$location',function ($state,$location) {
//we've got just /app or /app/3434,nothing that contains /leftpanel,so turn off
$state.transitionTo("off");
}]);
然后加上“关”状态：
$stateProvider.state('off',{
//url: //there is no url
views:{
container:{
template: 'blank',controller:['$scope','$stateParams',function($scope,$stateParams){
console.log("off yay"); //just for sanity,not necessary
}]
}
}});
然后设置应用程序路由的其余部分：
appModule.constant('LEFT_PANEL_STATES',function() {
var leftPanelRoot = {
name: 'root.leftpanel',//mandatory
template: '',url: "/app/:primaryId/leftpanel",views:{
'container@': {
templateUrl: "partials/leftpanel_container_partial.html",controller:"LeftPanelRootCtrl",resolve: {
//etc
}
}
},"abstract":true //makes this view only viewable from one of its child states
};
var leftPanelItemsList = {
name: 'root.leftpanel.itemslist',//mandatory
parent: leftPanelRoot,//mandatory
url: "/items-list",views:{
'childview@root.leftpanel': {
templateUrl: "partials/leftpanel_items_list.html",controller:"LeftPanelItemsListCtrl",resolve: {
//etc
}
}
}};
var leftPanelListDetail = {
name:"root.leftpanel.itemslist.detail",parent:leftPanelItemsList,url:"/:id/detail",views:{
"detail":{
templateUrl:"partials/leftpanel_item_detail.html",controller:"LeftPanelItemListDetailCtrl"
}
}};
var leftPanelExtendedDetailList = {
name:"root.leftpanel.itemslist.extendedlist",url:"/:id/extendedDetail/list",views:{
"extendeddetaillist":{
templateUrl:"partials/leftpanel_extended_detail_list.html",controller:"LeftPanelExtendedDetailListCtrl"
}
}};
