javascript - AngularJs:嵌套状态不显示

Question

我正在尝试在我的项目中实现嵌套状态，但它们没有按预期工作。

虽然 View 模板和 js 调用并在后面加载，但屏幕没有改变，换句话说，嵌套屏幕没有显示。

http://{domain}/#/app/store/users/1/new

下面是我的工作代码片段

.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://{domain}/#/app/store/users/1/new

考虑到上述网址，显示用户而不是NewUser。

提前致谢!!

Answer 1

您需要在父 View 中包含ui-view，以便它知道有一个 subview 附加到它。

基本上包括

<div ui-view></div>

或者

<ui-view></ui-view>

在 app.store.users 状态的一部分中，在您要加载子状态 HTML 的位置 (app.store.users.new)

这就是 ui-router 的工作原理。

检查这个笨蛋以更好地理解它: 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'
    }
});