嵌套子状态中的角度ui路由和多个视图

Question

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

这里有一些简化的代码（我在实际代码的页面上有几个组件。它的工作方式类似于todo。它基本上有一个列表和一个编辑视图（我不希望在列/行中编辑列表）和编辑视图将显示/隐藏，具体取决于您编辑单个项目或创建新项目的状态。我希望其他组件的其余列表仍然显示）：

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') and .state('todo.list.create')

但是我没看到你在哪里定义了一个名为todo.list的状态。 要做到这一点，要么定义一个todo.list状态，要么让2创建和编辑状态todo ：

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

也，

todo.list.edit

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

Answer 2

根据我收集的内容，您只能在状态父视图容器中设置模板，而不是父父视图。 如果有人找到解决方案，请发布，我会将其设置为asnwer