0

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

在此处输入图像描述

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

因此，用户仍然可以浏览“列表视图”中的列表，以使用不同的列表模式选择不同的项目——与此同时，任何疯狂的事情都可以在“项目视图”中继续发生。

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

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

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

在您看来，这些中最好的是什么？或者随意告诉你你有一个更好的主意。

4

1 回答 1

1
  1. 使用 ui-view 指令定义抽象 ListIndex 状态以保存子状态。
  2. 使用解析对象定义 ListIndex 的子级 ListCategory 状态，以访问控制器 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 状态会保留类别对象，所以您可以在项目模板中生成小版本的导航菜单，而无需任何额外的指令。

于 2013-08-05T09:03:46.223 回答