Ответ 1
Я создал рабочий плункер здесь
ПРИМЕЧАНИЕ. Вы должны больше узнать о состоянии вложенности и названии. Потому что текущее состояние и определение представления просто неверны.
Во-первых, мы не должны использовать определение состояния ONE со многими views: {}. Но мы должны разделить их на реальные состояния. Иерархия будет иметь три уровня
Первый уровень - состояние супер-root
.state( 'home', {
url: '/home',
views: {
"main": {
controller: 'HomeCtrl',
templateUrl: 'home/home.tpl.html'
},
}
})
Второй уровень - wizzard, убедитесь, что теперь мы меняем URL-адрес. Мы наследуем его первую часть от нашего родителя (дома)
.state("wizard", {
parent: 'home',
//url: '/home/wizard',
url: '/wizard',
controller: 'VendorsCtrl',
templateUrl: 'vendors/wizard.tpl.html'
})
Третий уровень - все где, что, когда теперь также наследует url. Они не должны определять родителя, потому что это часть их имен
.state( "wizard.where", {
//url: '/home/wizard/where',
url: '/where',
controller: 'VendorsCtrl',
templateUrl: 'vendors/wizard-where.tpl.html',
//parent: wizard
})
.state( "wizard.what", {
//url: '/home/wizard/what',
url: '/what',
controller: 'VendorsCtrl',
templateUrl: 'vendors/wizard-what.tpl.html',
//parent: wizard
})
.state( "wizard.when", {
//url: '/home/wizard/when',
url: '/when',
controller: 'VendorsCtrl',
templateUrl: 'vendors/wizard-when.tpl.html',
//parent: wizard
})
Родительский wizzard должен теперь содержать неименованный целевой объект ui-view=""
<div ui-view=""></div>
Текущий wizard.tpl.html содержит следующее:
<!-- our nested state views will be injected here -->
<div id="form-views" ui-view="[email protected]"></div>
Знак @ следует избегать, поскольку он может использоваться для наименования абсурдного представления - НО внутри определения состояния. Итак, что может работать ui-view="someName
<!-- our nested state views will be injected here -->
<div id="form-views" ui-view="someName"></div>
Теперь, это (в примере здесь) просмотрите содержимое home.tpl
<div>
<h1>HOME</h1>
<div ui-view=""></div>
</div>
И wizzard.tpl
<div>
<h2>WIZZARD</h2>
<div ui-view=""></div>
</div>
Итак, у нас есть неназванная цель представления внутри home и wizard, это очень удобно, потому что мы можем использовать определение состояния света без views : {}. И это всегда предпочтительнее, если у нас нет мульти-просмотров.
Это означает, что это определение состояния будет правильно введено в шаблон:
// no views - search in parent for a ui-view=""
...
.state( "wizard.when", {
url: '/when',
controller: 'VendorsCtrl',
templateUrl: 'vendors/wizard-when.tpl.html',
})
...
Проверьте документ:
Просмотреть имена - Относительные и абсолютные имена
За кулисами каждому представлению присваивается абсолютное имя, которое следует схеме
[email protected], где viewname - это имя, используемое в директиве представления, а имя состояния - это абсолютное имя состояния, например. contact.item. Вы также можете написать имена имен в абсолютном синтаксисе.Например, предыдущий пример также можно было записать как:
.state('report',{
views: {
'[email protected]': { },
'[email protected]': { },
'[email protected]': { }
}
})
Обратите внимание, что имена представлений теперь указаны как абсолютные имена, а не относительное имя. Он нацелен на представления "фильтры", "tabledata" и "graph", расположенные в корневом неназванном шаблоне. Поскольку он не указан, ничего не следует за "@". Корневой неназванный шаблон - ваш index.html.
Вызов состояния из состояния
Мы хотим, чтобы в том случае, когда состояние переходит к тому, когда мы можем использовать directiv ui-sref, но он должен содержать имя состояния, а не просмотр соглашения об именах
// instead of this
<a ui-sref="[email protected]"
we need this
<a ui-sref="wizard.what"
Причина того, что в этой трехуровневой иерархии мы используем только родительские и дочерние имена (не grand parent 'home'), скрыты в определении состояния. Потому что мы использовали это:
.state("wizard", {
parent: 'home',
Родитель является родителем, а не частью имени состояния. Что хорошо в таких сценариях (нам нужен корень/великий родитель, чтобы установить некоторые компоненты comon, но это имя не требуется для подстанций)
Проверьте документ:
ui-sref
Директива, которая связывает ссылку (тег
<a>) с состоянием. Если у государства есть связанный URL, директива автоматически генерирует и обновляет атрибут href с помощью метода $state.href(). Щелчок по ссылке вызовет переход состояния с дополнительными параметрами.
...Вы можете указать параметры для перехода к $state.go() с помощью атрибута
ui-sref-opts. Параметры ограничены местоположением, наследованием и перезагрузкой.
ui-sref- строка - 'stateName' может быть любым действительным абсолютным или относительным состоянием