Вложенный просмотр в нескольких представлениях с использованием ui router angularjs

У меня есть несколько просмотров на одной странице и в одном представлении. У меня есть вложенный вид. Как мне настроить это в app.js.Given ниже, это мой код, который не работает.
Это мой файл index.htmlВложенный просмотр в нескольких представлениях с использованием ui router 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>

Это мой 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' 
     }, 
     '[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

P.S. если plnkr не работает, просто обновите его. иногда возникают проблемы с получением htmls

источник

2016-07-29 07:07:51 CozyAzure

Вложенный просмотр в нескольких представлениях с использованием ui router angularjs

ответ

Смежные вопросы