AngularJs：ネストされた状態が表示されない

Question

プロジェクトでネストされた状態を実装しようとしていますが、期待通りに機能しません。

ビューテンプレートと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 /新ユーザーないNEWUSERを表示、URLの上考慮

。

ありがとうございます！

Answer 1

子ビューが接続されていることがわかるように、親ビューにui-viewを含める必要があります。

は基本的にあなたが子供の状態のためのHTMLをロードしたい場所（アプリで、app.store.users状態の部分で

<div ui-view></div> 

OR

<ui-view></ui-view> 

が含まれます.store.users.new）

これは、ui-routerが機能する方法です。

チェックそれをよりよく理解するために、このplunker： http://plnkr.co/edit/u18KQc?p=preview

EDIT：あなたは、彼らが親子関係にすべきではない2つの別々の画面としてそれらをしたい場合は

。 URLはまだネストすることができる2つの独立した状態でなければなりません。あなたの州の名前を互いに独立させるように変更するだけです。

このような何かが動作します：

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