angularjs – 如何使用具有多个模块的ui路由器管理状态

我有一个包含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:{
      '[e-mail]': {
          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"
  }
}};