如何简化具有多种子状态组合的angular-ui-router嵌套状态？

Question

这是我的应用程序的模拟：

＆＃34;左侧栏＆＃34;用于目录，而主要内容是＆＃34;是为了文件。这些文件是从所选目录（[列表模式]）中枚举的。

＆＃34;左侧栏＆＃34;将被重用于其他两个目的：

1. 显示表单以创建新目录（[创建模式]）
2. 显示表格以编辑所选目录（[编辑模式]）

同样，主要内容也可以是[列表模式]，[编辑模式]和[创建模式]。因此，总共会有3 x 3种可能的组合。

使用ng-switch，可以很容易地建模这个。

<div class="left-bar">
  <div ng-switch on="directory.mode">
    <div ng-switch-when="list"></div>
    <div ng-switch-when="create"></div>
    <div ng-switch-when="edit"></div>
  </div>
</div>
<div class="main-content">
  <div ng-switch on="files.mode">
    <div ng-switch-when="list"></div>
    <div ng-switch-when="create"></div>
    <div ng-switch-when="edit"></div>
  </div>
</div>

但是，我希望使用angular-ui路由器对此进行建模。我是angular-ui的新手，我现在想到的状态模型就像是：

.state('main.folder-list.file-list', views: {'left-sidebar':{templateUrl:'directory-list.html'}, 'main-content':{templateUrl:'file-list.html'}})
.state('main.folder-list.file-edit', ...)
.state('main.folder-list.file-create', ...)
.state('main.folder-edit.file-list', ...)
.state('main.folder-edit.file-edit', ...)
.state('main.folder-edit.file-create', ...)
.state('main.folder-create.file-list', ...)
.state('main.folder-create.file-edit', ...)
.state('main.folder-create.file-create', ...)

一个重要的要求：当＆＃34;左侧栏的模式＆＃34;切换，主要内容＆＃34;的内容不应该改变（它应该仍然保持与以前相同的模式），反之亦然。

如何简化？

Answer 1

首先想一想，记住angular-ui router能够处理嵌套状态。我通常使用.state('root')，.state('root.app')，.state('root.app.specific')等。使用angular-ui router的特征，我们可以简单地将$scope设置为root状态$scope.data = { status: 'ok' }和root的孩子，我们仍然可以调用$scope.data。

此外，如果您的create，list，edit是通用的＆＃34;类＆＃34;或单身。您还可以使用控制器类型angular controller inheritance中的$controller('[parent-controller]', {$scope: $scope});来简化操作。因此，您的parent-controller $scope类似方法可以在new controller $scope内调用。 Angular-ui router的嵌套状态与此类似。例如：

Application.controller('AppCtrl', ['$scope', '$controller', function($scope, $controller) {
  $controller('AdminCtrl', {$scope: $scope});
}]);

在该示例中，我的AppCtrl将拥有AdminCtrl＆＃39; $scope。