ui-router populating templateurl and controllers nested abstract states with nested views

Question

I have been experimenting with ui-router and I ran into a bit of a quirk. I am unable to populate a view underneath an abstract state. It appears that while the state is active, the view is not found

Here is an example :

the state provider :

$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:

index.html :

<div> <div ui-view></div> </div>

layout.html :

<div> <div ui-view='full-page'></div> </div>

search.html :

<div> <div ui-view='content-container'></div> </div>

user.list.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>

I page state flow that I am trying to get is :

1) initial site loading of search.list (which bubbles up to

• 1.a: load layout.html into the default ui-view in index.html via the '@' view'
• 1.b: search.html is loaded via the "full-page" view in layout.html, then
• 1.c: user.list.html is loaded via the content-container@search view in the search.list state. This is working fine and dandy

2) clicking on the list created in user.list.html loads search.user.view which should? bubble back to search.user,

• 2.a load user.detail.html in the content-container@search view of search.html, then (this works)
• 2.b load in user.detail.view.html in the ui-view='left-column' div of user.detail.html. (this does not work, "left-column" view is left empty.)

I originally thought this code performs the same pattern of abstract state ui-view population twice (once for the user.list, the other for user.detail.view) however, it appears this is not the case. It seems as though the "left-column" view is searched before the content-container is populated

I'm new to the ui-router so I may have a misconception of the sequence of how abstract states populate or the intended use of abstract states.

Answer 1

You are almost there - here is a working plunker. The changes I made

user.detail.html

not the ng-view but 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>

state 'search.user.view'

the part after @ delimiter must be the name of a state holding that ui-view - which is not search but search.user. As I show on right-column below - if this is in fact parent... we can skip it (will be done for us behind the scene)

.state('search.user.view', {
    url : '',
    views: {
        // 'left-column@search' : { 
        'left-column@search.user' : { 
           ...
        },
        'right-column@' : { 
           ...
        }
    }

Check the working example here