使用ui路由器在多個視圖中嵌套視圖angularjs

我在一個頁面上和一個視圖內有多個視圖我嵌套view.How應該配置此app.js.Given下面是我的代碼不工作。
這是我的index.html文件使用ui路由器在多個視圖中嵌套視圖angularjs

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

這是我view1.html文件

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

這是我的廠景，child1.html文件

<h1>Child1<h1>

這是我的廠景-child2.html文件

<h1>Child2<h1>

這是我view2.html文件

<h1>Hello World</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

你困惑與各州的意見。

沒有view1.child1狀態，原因是您沒有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' 
})

還要記住，你會在你的index.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

附：如果plnkr不工作只是刷新它。有時它有問題提取htmls

來源

2016-07-29 07:07:51 CozyAzure

使用ui路由器在多個視圖中嵌套視圖angularjs

回答

相關問題