AngularJs:嵌套状态不显示
问题描述:
我想在我的项目中实现嵌套状态,但它们不按预期方式工作。AngularJs:嵌套状态不显示
尽管视图模板和js调用是在后台加载的,但屏幕不会改变换句话说嵌套屏幕不显示。
的http:// {域} /#/应用/存储/用户/ 1 /新
下面是我的工作
.state('app.store.users', {
url: '/users/:storeid',
params: { storeid: '1' },
templateUrl: 'store/users',
controller: 'UsersController',
require: ['users', 'datatables'],
data: {
displayName: 'Store Users'
}
})
.state('app.store.users.new', {
url: '/new',
templateUrl: 'store/newuser',
controller: 'NewUserController',
require: ['newuser'],
data: {
displayName: 'New User'
}
})
;
HTTP的代码片段:// {域} /# /应用/存储/用户/ 1 /新
考虑到上述的URL,显示用户不NEWUSER。
在此先感谢!
答
您需要在父视图中包含ui-view
,以便它知道附加了子视图。
主要包括
<div ui-view></div>
OR
<ui-view></ui-view>
中要加载子状态的HTML部分的
app.store.users状态,在地方
(应用.store.users.new)
这是ui路由器的工作原理。
检查这个plunker更好地理解它: http://plnkr.co/edit/u18KQc?p=preview
编辑:
如果你希望他们作为两个独立的画面,他们不应该在父子关系。它们应该是两个独立的状态,其中URL仍然可以嵌套。只需将您的州名改为彼此独立。
像这样将工作:
.state('app.store.users', {
url: '/users/:storeid',
params: { storeid: '1' },
templateUrl: 'store/users',
controller: 'UsersController',
require: ['users', 'datatables'],
data: {
displayName: 'Store Users'
}
})
.state('app.store.newusers', {
url: '/users/:storeid/new',
params: { storeid: '1' }, //you still have to pass params to it
templateUrl: 'store/newuser',
controller: 'NewUserController',
require: ['newuser'],
data: {
displayName: 'New User'
}
});
为什么你的URL是这样/应用/存储/用户...?从哪里来应用程序/商店? –
控制台中有任何错误吗? –
@ZeRubeus上面有两个父状态,'app'和'app.store'依次有url'/ app'和'app/store'。直到/用户的事情工作正常。 – ANKIT