Javascript AngularJS-什么'；这是实施a"；画中画”；在我指定的应用程序中查看？

所以我在我的一个项目中使用AngularUI路由器，它需要以某种方式实现“画中画”功能。。。下面是一个人为的例子：

在“列表视图”中，您可以选择其中一个项目，它将带您进入“项目视图”——其中嵌入了一个很小的“列表视图”

因此，用户仍然可以在“列表视图”中的列表中导航，以使用不同的列表模式选择不同的项目，而“项目视图”中的任何异常都可以继续发生

现在有趣的是，由于我使用的是AngularUI路由器——它将状态机的概念与路由绑定在一起——我不确定解决这个问题的最佳方法

到目前为止，我提出了一些可能的解决方案：

• 使“列表视图”成为一个指令
• 将“列表视图”和“项目视图”放入具有独立状态机的独立模块中，并以某种方式将它们绑定在一起（我不知道如何做到这一点）
• 定义一打 “图片列表视图中的图片”的更多无URL状态

你认为这些最好的是什么？或者说你有更好的主意

使用ui视图指令定义抽象ListIndex状态以保存子状态

使用resolve对象定义作为ListIndex子级的ListCategory状态，以访问控制器列表和项目控制器中的类别信息

定义作为ListCategory子级的ListCategoryItem状态

一些快速示例代码：

states.ListIndex = {
   url: '/list',
   abstract: true,
   template: '<div ui-view/>'
};
states.ListCategory = {
  url: '/list/:categoryId',
  controller: ['$scope', 'category', function($scope, category) {
    $scope.category = category;
  }],
  templateUrl: 'category.html',
  resolve: {
    category: ['CategoryService', '$stateParams', function(CategoryService, $stateParams) {
      return CategoryService.get($stateParams.categoryId);
    }]
};
states.ListCategoryItem = {
  url: 'list/:categoryId/:itemId',
  controller: ['$scope', 'item', function($scope, item) {
    $scope.item = item;
  }],
  templateUrl: 'item.html',
  resolve: {
    item: ['ItemService', '$stateParams', function(ItemService, $stateParams) {
      return ItemService.get($stateParams.itemId);
    }]
  }
}

//iterate states and add each of them to $stateProvider
//...

states.ListIndex={
url:“/list”，
摘要：没错，
模板：“”
};
states.ListCategory={
url:“/list/：categoryId”，
控制器：['$scope'，'category'，函数（$scope，category）{
$scope.category=类别；
}],
templateUrl:'category.html'，
决心：{
类别：['CategoryService'，'$stateParams'，函数（CategoryService，$stateParams）{
返回CategoryService.get（$stateParams.categoryId）；
}]
};
states.ListCategoryItem={
url:'list/：categoryId/：itemId'，
控制器：['$scope'，'item'，函数（$scope，item）{
$scope.item=项目；
}],
templateUrl:'item.html'，
决心：{
项：['ItemService'，'$stateparms'，函数（ItemService，$stateparms）{
返回ItemService.get（$stateParams.itemId）；
}]
}
}
//迭代状态并将每个状态添加到$stateProvider
//...

类别模板：

<ul ng-repeat="item in category.items">
   <li>{{item.title}}</li>
</ul>

<div item-view="item"></div>

<div ng-include="'category.html'" class="small"></div>

{{item.title}

项目模板：

<ul ng-repeat="item in category.items">
   <li>{{item.title}}</li>
</ul>

<div item-view="item"></div>

<div ng-include="'category.html'" class="small"></div>

---

因为导航到ListCategoryItem状态会保留类别对象，所以您可以在项目模板中生成导航菜单的小版本，而无需任何其他指令。

非常有趣的解决方案-谢谢！但在我的例子中，“ListIndex”还有一些子状态（它不是一个简单的列表，但有点像一个多步骤选择器），所以问题之一是，当我浏览菜单的小版本时，它将触发状态更改并销毁“ListCategoryItem”视图。当用户浏览小菜单时，ItemListView会发生什么情况？您能详细说明ListIndex子状态吗？UI路由器的状态模型非常适合多步骤场景，除非需要多个同时状态。一个可以很好地说明我所处状况的示例过于复杂d我怀疑我在架构层面上做错了什么。你能用几个例子分别告诉我如何使用AngularUI路由器执行多步骤和多个同时状态吗？我已经设置了另外两个单独的问题（非常感谢！）：和