angularjs - 如何使用具有多个模块的 ui-router 管理状态

Question

我有一个包含 3 列的应用程序页面。中间列是主要事件，始终显示。两侧的列是小部件列表，它们有自己的 Controller 和状态，可以隐藏或不隐藏，并且在其中也有多个 View 。理想情况下，我想像下面这样的 url 路由:

/app - 显示主要事件，隐藏两个面板

/app/1234 - 显示主要事件，但显示 1234 实体的信息

/app/1234/leftpanel - 主要事件显示为 1234 实体，并且左侧面板已打开

/app/1234/leftpanel/list - 主要事件显示为 1234 实体，左面板显示 ListView

/app/leftpanel/list - 主要事件显示默认状态，左面板仍显示列表

这可以用ui-router设置吗？我看过这个例子:

https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions

它显示了如何在多个模块之间使用 $stateProvider，但我仍然没有看到如何使这个场景工作-

Answer 1

我确实解决了这个问题。我还在 angular-ui github 上发布了这个问题，他们的回答基本上是，“好吧，这种情况并不是路由器的设计目的，所以如果你想要“更高级”的状态管理，请将数据放入参数中并自己查看它们并实现您需要的任何逻辑”。我有点觉得这就是 ui-router 的设计目的，所以我对其进行了一些扩展(没有更改源代码)来实现这一点。解决方案是抽象状态、假“关闭”状态、路由器 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",
parent:leftPanelItemsList,
url:"/:id/extendedDetail/list", 
views:{
  "extendeddetaillist":{
    templateUrl:"partials/leftpanel_extended_detail_list.html",
    controller:"LeftPanelExtendedDetailListCtrl"
  }
}};