AngularJs：不顯示嵌套狀態

Question

我正在嘗試在我的項目中實現嵌套狀態，但是它們沒有按預期工作。

盡管View模板和js調用已在后台進行並加載，但屏幕沒有變化，換句話說，嵌套屏幕不會顯示。

http：// {domain} /＃/ app / store / users / 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：// {domain} /＃/ app / store / users / 1 /新

考慮到上面的url，顯示用戶不是NewUser 。

提前致謝！！

Answer 1

您需要在父視圖中包括ui-view ，以便它知道有一個附加的子視圖。

基本上包括

<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'
    }
});