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

我有一个3栏的应用程序页面。中间一栏是主要活动，始终显示。这两个侧列是小部件列表，它们有自己的控制器和状态，可以隐藏或取消隐藏，并且其中也有多个视图。理想情况下，我会设想如下url路由：

/应用程序-显示主活动，两个面板均隐藏

/app/1234-显示主活动，但显示1234实体的信息

/app/1234/leftpanel-主活动显示为1234实体，leftpanel打开

/app/1234/leftpanel/list-主活动与1234实体一起显示，leftpanel显示列表视图

/app/leftpanel/list-主活动显示默认状态，leftpanel仍显示列表

是否可以使用ui路由器进行设置？我见过这个例子：

---

这显示了如何在多个模块之间使用$stateProvider，但我仍然不知道如何使这个场景工作-

我确实解决了这个问题。我也在angular ui github上发布了关于这一点的信息，他们的回答基本上是，“嗯，这种情况并不是路由器设计的目的，所以如果你想要“更高级”的状态管理，把数据放在参数中，自己查看，实现你需要的任何逻辑”。我有点觉得这就是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");
   }]);

然后添加“关闭”状态：

然后设置应用程序路由的其余部分：

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",
parent:leftPanelItemsList,
url:"/:id/extendedDetail/list", 
views:{
  "extendeddetaillist":{
    templateUrl:"partials/leftpanel_extended_detail_list.html",
    controller:"LeftPanelExtendedDetailListCtrl"
  }
}};

---

你有什么发现吗？我真的很想知道怎么做。我在这里添加了一个问题，我的理论是，如果您能够使ui状态独立于根范围，那么您可以在模块内进行粒度控制。然而，它似乎直接与$rootScope结合在一起……你解决过这个问题吗？请参阅发布的答案——我见过几个例子，其中我尝试让ui router执行类似的操作，而开发团队的响应基本相同。

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",
parent:leftPanelItemsList,
url:"/:id/extendedDetail/list", 
views:{
  "extendeddetaillist":{
    templateUrl:"partials/leftpanel_extended_detail_list.html",
    controller:"LeftPanelExtendedDetailListCtrl"
  }
}};