AngularJS - 在我声明的应用程序中实现“画中画”视图的最佳方法是什么？

Question

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

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

因此，用户仍然可以浏览“列表视图”中的列表，使用不同的列表模式选择不同的项目 - 在“项目视图”中，任何一切都可以继续发生。

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

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

• 将“列表视图”转换为指令
• 将“列表视图”和“项目视图”放入具有单独状态机的单独模块中，并以某种方式将它们绑定在一起（我不知道该怎么做）
• 定义十几个 “画中画列表视图”的更多无URL状态

您认为这些中最好的是什么？或者随意告诉你，你有更好的主意。

Answer 1

1. 使用ui-view指令定义抽象ListIndex状态以保存子状态。
2. 定义作为ListIndex的子类的ListCategory状态，其中resolve对象用于访问控制器List和Item控制器中的类别信息。
3. 定义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
//...

类别模板：

<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状态会保留类别对象，因此您可以在项目模板中生成小版本的导航菜单，而无需任何其他指令。