ui router angularjsを使用した複数のビュー内のネストされたビュー

1つのページに複数のビューがあり、1つのビュー内にネストされたview.Howを設定する必要があります。これはapp.js.Givenで設定する必要があります。
これは、これは私のVIEW1である。これは私のVIEW1-child1.htmlファイルです。これは私のview1.htmlファイルですui router angularjsを使用した複数のビュー内のネストされたビュー

<h1>Child1<h1>

<div ui-view> </div> 
<button type="button" ui-sref="view1.child1"></button> 
<button type="button" ui-sref="view1.child2"></button>

私のindex.htmlファイル

<body ng-app="configuratorApp" > 
    <div ui-view="view1"></div> 
    <div ui-view="view2"></div> 
</body>

です-child2.htmlファイル

<h1>Child2<h1>

これは私のapp.jsあなたは状態と意見を混同

.state('home',{ 
    url: '/', 
    views: { 
     '': { 
      templateUrl: 'index.html' 
     }, 
     '[email protected]': { 
      templateUrl: 'view1.html' 
     },'[email protected]': { 
      templateUrl: 'view2.html' 
     } 
     } 
}) 
.state('view1.child1', { 
     url: '/child1', 
     templateUrl: 'view1-child1.html' 
    }) 
.state('view1.child2', { 
     url: '/child2', 
     templateUrl: 'view1-child2.html' 
    })

出典

2016-07-29 sameedhayat

ファイルです。これは私のview2.htmlファイル

<h1>Hello World</h1>

です。

の状態はありません。上記のコードが不完全な場合を除き、view1を親の状態にしていないのが原因です。代わりに名前はhome.childである必要があります。

.state('home.child1', { //this should be home.child1 instead of view1.child1 
    url: '/child1', 
    templateUrl: 'view1-child1.html' 
}) 
.state('home.child2', { 
    url: '/child2', 
    templateUrl: 'view1-child2.html' 
})

はまた、あなたのhome状態を取り込むことができない他、ごindex.htmlにルートテンプレート（または名前ルートテンプレート）が必要になります心に留め。

ここ

<body ng-app="configuratorApp"> 
    <div ui-view></div> <!--this is the root template, to let Home state 'live' here--> 
</body>

が働いplnkr

P.S.です：

は、だからあなたのindex.htmlに、あなたはこれを持っている必要がありますplnkrが動作していない場合は、リフレッシュするだけです。場合によってはhtmlを取得する際に問題があります

出典

2016-07-29 07:07:51 CozyAzure

ui router angularjsを使用した複数のビュー内のネストされたビュー

答えて

関連する問題