ui-router 父状态可选参数

Question

我正在尝试管理列表和列表元素的 CRUD。

我希望每个案例的每个元素都有一个状态、一个模板和一个控制器（创建/编辑）。

我创建状态：

state('list', {
                parent: 'root',
                url: '/list?list_id',
                views: {
                    'content@root': {
                        templateUrl: 'list.tmpl.html',
                        controller: 'ListController',
                        controllerAs: 'vm',
                    }
                }
            })

这是完美的，在控制器中我可以检查 list_id 并在创建/编辑之间切换。

当上述状态成为父状态时会出现问题。 介绍孩子时：

state('list-element', {
                parent: 'list',
                url: '/element?list_id&element_id',
                views: {
                    'content@root': {
                        templateUrl: 'element.tmpl.html',
                        controller: 'ElementController',
                        controllerAs: 'vm',
                    }
                }
            })

我不能再有我需要的不确定性了。

为了更简单，我希望 url 结构看起来像这样：

• /list?list_id - 如果 list_id 切换编辑
• /list/element?list_id&element_id - 如果 element_id 切换编辑

注意，创建列表元素时，父状态没有参数。

现在，我可以通过为列表创建两个状态来解决这个问题：

1. /list（父）创建
2. ?list_id（1 的孩子）编辑
3. /element?list_id&element_id（1 的子代）创建或编辑

但这会打破我想要的“一个状态、一个模板和一个控制器”。

无论如何我可以做到按照我想要的方式？

Answer 1

我知道你正在寻找一个特定的实现，但我认为你遇到麻烦的部分原因是因为这种方法可能不是你想要做的最好的，因为它看起来像你重新混淆了路由与 DOM 元素的角色。

组件（和指令）旨在帮助您为页面上的元素明确地捆绑控制器和模板。路由就是让您到达那里的原因，并告诉您要加载哪些。以下是您可以使用更传统的方法处理此问题的方法：

stateHelperProvider.state({
  name: 'list', 
  url: '/list'
  // This is possible with https://github.com/marklagendijk/ui-router.stateHelper
  children: {
    name: 'element',
    // Example: /list/123
    url: '/{list_id:int}?element_id',
    resolve: {
      item: ['$stateParams', 'FooService', ($stateParams, FooService) => {
        // Get whatever info you need, based on the ID.
        return FooService.getItem($stateParams.list_id);
      }
    },
    views: {
      'content@root': {
        // This will use the resolved `item` and pass it into the component.
        template: '<list-element item="$resolve.item"></list-element>'
      }
    }
  }
});

// The component
(function () {
  'use strict';
  angular.module('yourModule')
    .component('listElement', {
      templateUrl: 'element.tmpl.html',
      bindings: {
        item: '<'
      }
    });
})();

// Sample component template
<h2 ng-bind="$ctrl.item.name"></h2>
<div ng-bind="$ctrl.item.description"></div>

对于不同的路线，您可能需要查看nested named views in UI Router。这将允许您指定不同的控制器、模板和状态。要点：

<!-- Parent template -->
<div ui-view="editContents"></div>
<div ui-view="previewContents"></div>