我有一个抽象的父状态,它基本上只包含一个具有ui-views的模板html。我有多个子状态,包含多个视图,每个子状态都有子状态,也包含多个视图。该行中的第一个子状态工作正常,但当我尝试将子状态访问到子状态时,它会崩溃。
这里有一些简化的代码(我在实际代码的页面上有几个组件。它的工作方式与todo类似。它基本上有一个列表和一个编辑视图(我不想在行/中)列表的行编辑)和编辑视图将显示/隐藏,具体取决于您编辑单个项目或创建新项目的状态。我希望其他组件的其余列表仍然显示):
的index.html:
<div ui-view></div>
<div ui-view="todo-edit"></div>
<div ui-view="todo-list"></div>
js code:
$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不起作用,只会将我返回到根页面而没有任何错误。任何人都知道问题可能是什么以及如何解决?任何建议,将不胜感激。也许我在错误的轨道上有观点,还有另一种解决方法吗?
我想解决不同的状态&#34;在服务或类似的东西之间使用状态而不是ng-include和共享状态。
答案 0 :(得分:3)
您正在定义todo.list
的两个子状态:
.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
。
答案 1 :(得分:1)
从我收集到的内容中,您只能在状态父视图容器中设置模板,而不能在父父视图中设置模板。如果有人找到解决方案,请发布,我将其设置为asnwer