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＆amp; element_id - if element_id toggle edit

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

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

/ list（parent） create
？list_id（1的孩子）编辑
/ element？list_id＆amp; element_id（child for 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>

ui-router父状态可选参数

1 个答案: