ui-router, заполняющий templateurl и контроллеры, вложенные абстрактные состояния с вложенными представлениями
-
20-12-2019 - |
Вопрос
Я экспериментировал с ui-router
и я столкнулся с небольшой странностью.Я не могу заполнить представление под абстрактным состоянием.Похоже, что пока состояние активно, представление не найдено
Вот пример:
государственный поставщик:
$stateProvider
.state('search', {
abstract: true,
url: '',
views: {
'@': {
templateUrl: 'app/views/layout.html',
},
'full-page@search': {
templateUrl : 'app/views/search/search.html',
}
}
})
//------------------------------------------------------------
// Search list view
//------------------------------------------------------------
.state('search.list', {
url: '/search/users',
views: {
'content-container@search' : {
templateUrl : 'app/views/search/user.list.html',
controller : 'SearchResults',
}
}
})
//------------------------------------------------------------
// Search view of one users's details
//------------------------------------------------------------
.state('search.user', {
abstract : true,
url: '/search/usr/{userId}',
views: {
'content-container@search' : {
templateUrl: 'app/views/user/user.detail.html',
controller : 'UserController',
},
}
})
//------------------------------------------------------------
// View of the user's details
//------------------------------------------------------------
.state('search.user.view', {
url : '',
views: {
'left-column@search' : {
templateUrl : 'app/views/user/user.detail.view.html',
controller : 'UserEditController',
}
}
})`
HTML:
индекс.html:
<div>
<div ui-view></div>
</div>
макет.html:
<div>
<div ui-view='full-page'></div>
</div>
поиск.html:
<div>
<div ui-view='content-container'></div>
</div>
пользователь.список.html:
<div>
<ul>
<li ng-repeat="user in users">
<a ui-sref='search.user.view({userId : user.userId})'></a>
</li>
</ul>
</div>
user.detail.html:
<div>
<div ng-view="left-column"></div>
<div ng-view='right-column'></div>
</div>
user.detail.view.html :
<div> User information </div>
Поток состояния страницы, который я пытаюсь получить, таков:
1) первоначальная загрузка сайта search.list (который всплывает до
- 1.а:нагрузка
layout.html
в пользовательский интерфейс по умолчанию в index.html через представление «@» - 1.б:
search.html
загружается через «полностраничный» просмотр в файле Layout.html, затем - 1.в:
user.list.html
загружается черезcontent-container@search
просмотреть в состоянии search.list.Это работает отлично и отлично
2) щелкнув по списку, созданному в user.list.html
загружает search.user.view, который должен?вернуться к search.user,
- 2. нагрузка user.detail.html в
content-container@search
просмотр search.html, затем (это работает) - 2.b загрузить user.detail.view.html в
ui-view='left-column'
div из user.detail.html.(это не работает, представление «левая колонка» остается пустым.)
Первоначально я думал, что этот код дважды выполняет один и тот же шаблон заполнения пользовательского интерфейса абстрактного состояния (один раз для user.list, другой для user.detail.view), однако, похоже, это не так.Кажется, будто "left-column"
просмотр ищется до заполнения контейнера содержимого
Я новичок в ui-маршрутизаторе, поэтому у меня может быть неправильное представление о последовательности заполнения абстрактных состояний или предполагаемом использовании абстрактных состояний.
Решение
Вы почти у цели – вот рабочий планкер.Изменения, которые я сделал
user.detail.html
не нг-просмотр но ui-view
<div>
//<div ng-view="left-column"></div>
//<div ng-view='right-column'></div>
<div ui-view="left-column"></div>
<div ui-view='right-column'></div>
</div>
состояние «search.user.view»
часть после @
разделитель должен быть именем состояние удерживая этот ui-view – которого нет поиск но search.user
.Как я покажу на right-column
ниже - если это действительно родительский элемент...мы можем пропустить это (будет сделано для нас за сценой)
.state('search.user.view', {
url : '',
views: {
// 'left-column@search' : {
'left-column@search.user' : {
...
},
'right-column@' : {
...
}
}
Проверьте рабочий пример здесь