Javascript 如何用许多子状态组合简化角ui路由器嵌套状态？

以下是我的应用程序的模型：

“左侧栏”表示目录，“主要内容”表示文件。从选定目录（[列表模式]）枚举文件

“左侧杆”可用于2个其他用途：

显示表单以创建新目录（[创建模式]）

显示表单以编辑所选目录（[编辑模式]）

类似地，主要内容也可以处于[列表模式]、[编辑模式]和[创建模式]。因此，总共有3 x 3种可能的组合

使用ng开关，可以很容易地对其进行建模

<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 router

能够处理嵌套状态。我通常使用

.state（'root'）

，

.state（'root.app'）

，

.state（'root.app.specific'）

，等等。借助

angular ui router

的特性，我们可以简单地在

root

状态设置

$scope.data={status:'ok'}

，以及在root的子级中，我们仍然可以称之为

$scope.data

另外，如果您的

创建

，

列表

，

编辑

是通用的“类”或单例。您还可以在控制器类型

$controller（“[parent controller]”，{$scope:$scope}）中使用
角度控制器继承
，使其变得简单。因此，您的父控制器
/code>'s
$scope
它们拥有的类似方法等将能够在
new controller
's
$scope
内调用<代码>角度ui路由器的嵌套状态与此类似。例如：

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

在该示例中，我的
AppCtrl
将具有
AdminCtrl
的
$scope

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