Вложенное представление в нескольких представлениях с помощью пользовательского интерфейса angularjs

Question

Вложенное представление в нескольких представлениях с помощью пользовательского интерфейса angularjs

0

У меня есть несколько просмотров на одной странице, и в одном представлении у меня есть вложенный вид. Как мне настроить это в 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'
    })

sameedhayat 29 июль 2016, в 08:05

Источник

Теги:

javascript

html

angularjs

angular-ui-router

1 ответ

Ещё вопросы

CozyAzure · Answer 1 · 2016-07-29T04-15-00.000Z

Вы путаете взгляды с состояниями.

Там нет 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