У меня есть несколько просмотров на одной странице, и в одном представлении у меня есть вложенный вид. Как мне настроить это в app.js.Given ниже, это мой код, который не работает.
Это мой файл index.html
<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>
Это мой файл view1-child1.html
<h1>Child1<h1>
Это мой файл view1-child2.html
<h1>Child2<h1>
Это мой файл view2.html
<h1>Hello World</h1>
Это мой файл app.js
.state('home',{
url: '/',
views: {
'': {
templateUrl: 'index.html'
},
'view1@home': {
templateUrl: 'view1.html'
},'view2@home': {
templateUrl: 'view2.html'
}
}
})
.state('view1.child1', {
url: '/child1',
templateUrl: 'view1-child1.html'
})
.state('view1.child2', {
url: '/child2',
templateUrl: 'view1-child2.html'
})
Вы путаете взгляды с состояниями.
Там нет view1.child1
состояния, причины в том, вы не имеете view1
как метрополия (если код размещен выше, не является неполным). home.child
этого имя должно быть 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
Ps, если plnkr не работает, просто обновите его. иногда возникает проблема с выбором htmls