javascript - 嵌套子状态中的 Angular ui 路由和多个 View

Question

我有一个抽象的父状态，它基本上只包含一个具有 ui View 的模板 html。我有多个包含多个 View 的子状态，每个子状态都有也包含多个 View 的子状态。该行中的第一个子状态工作正常，但是当我尝试将子状态访问到子状态时，它崩溃了。

这是一些简化的代码(我在实际代码的页面上有几个组件。它像待办事项一样工作。它基本上有一个列表和一个编辑 View (我不想在行/行中编辑列表)并且编辑 View 将根据您编辑单个项目或创建新项目的状态显示/隐藏。我希望其他组件的其余列表仍然显示):

index.html:

<div ui-view></div>
<div ui-view="todo-edit"></div>
<div ui-view="todo-list"></div>

js代码:

$stateProvider
    .state('root', {
        abstract: true,
        url: '/',
        templateUrl: '/index.html'
    })
    .state('root.todo', { //This state works
        url: '/todo',
        views: {
            '': {
                template: 'Todo list'
            },
            'todo-list': {
                templateUrl: '/todo-list.html',
                controller: 'TodoListController'
            }
        }
    })
    .state('root.todo.edit', { //This state does not work
        url: '/edit/:id',
        views: {
            '@root': {
                template: 'Edit todo'
            },
            'todo-list@root': {
                templateUrl: '/todo-list.html',
                controller: 'TodoListController'
            },
            'todo-edit@root': {
                templateUrl: '/todo-edit.html',
                controller: 'TodoEditController'
            }
        }
    })
    .state('root.todo.create', { //This state does not work
        url: '/create',
        views: {
            '@root': {
                template: 'Create todo'
            },
            'todo-list@root': {
                templateUrl: '/todo-list.html',
                controller: 'TodoListController'
            },
            'todo-edit@root': {
                templateUrl: '/todo-edit.html',
                controller: 'TodoEditController'
            }
        }
    });

状态 todo.list.edit 不起作用，它只会将我返回到根页面而不会出现任何错误。任何人都知道问题可能是什么以及如何解决？任何建议，将不胜感激。也许我的观点走错了路，有另一种方法可以解决吗？

我想使用状态而不是 ng-include 来解决不同的“状态”，并在服务或类似的东西之间共享状态。

Answer 1

您正在定义 todo.list 的 2 个子状态:

.state('todo.list.edit') 和 .state('todo.list.create')

但我看不到您在哪里定义了名为 todo.list 的状态。为此，要么定义一个 todo.list 状态，要么使 2 个创建和编辑状态成为 todo 的子级:

.state('todo.edit') 和 .state('todo.create')

此外，

todo.list.edit

无效，因为你的 todo 状态实际上被称为 root.todo 所以即使你有一个 todo.list 状态它也会有被称为 root.todo.list。