ui-router, заполняющий templateurl и контроллеры, вложенные абстрактные состояния с вложенными представлениями

Question

Я экспериментировал с 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-маршрутизаторе, поэтому у меня может быть неправильное представление о последовательности заполнения абстрактных состояний или предполагаемом использовании абстрактных состояний.

Answer 1

Вы почти у цели – вот рабочий планкер.Изменения, которые я сделал

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@' : { 
           ...
        }
    }

Проверьте рабочий пример здесь