-interfaccia utente del router compilazione templateurl e controller nidificati abstract stati annidati vista

Question

Sto sperimentando ui-router e mi sono imbattuto in un po ' di un capriccio.Io sono in grado di compilare una vista sotto un abstract di stato.Sembra che mentre lo stato è attivo, la vista non è stato trovato

Ecco un esempio :

lo stato del fornitore di :

$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 pagina stato flusso che sto cercando di ottenere è :

1) iniziale di caricamento del sito di ricerca.elenco (bolle fino a

• 1.a:carico layout.html in default ui-view in index.html via la '@' vista'
• 1.b: search.html viene caricata tramite il "full-page" in vista layout.html poi
• 1.c: user.list.html viene caricata tramite il content-container@search vista nella ricerca.elenco stato.Questo sta lavorando bene e dandy

2) cliccando su lista creata in user.list.html carichi di ricerca.utente.quello che deve?bolla di nuovo alla ricerca.utente,

• 2.un carico user.detail.html nel content-container@search vista search.html poi (questo funziona)
• 2.b carico user.detail.view.html nel ui-view='left-column' div di user.detail.html.(questo non funziona", a sinistra della colonna" vista è lasciato vuoto.)

Ho inizialmente pensato che esegue questo codice lo stesso modello astratto di stato di ui-view popolazione due volte (una volta per l'utente.elenco, l'altra per l'utente.dettaglio.vista) tuttavia, sembra che questo non è il caso.Sembra come se il "left-column" vista è cercato prima il contenuto-contenitore è popolato

Sono nuovo all'interfaccia utente del router così che io possa avere un'idea sbagliata della sequenza di come astratta stati popolare o la destinazione d'uso di astratto stati.

Answer 1

Ci sei quasi - qui è un lavoro plunker.Le modifiche che ho fatto

user.detail.html

non l' ng-vista ma 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>

stato 'di ricerca.utente.vista'

la parte dopo @ delimitatore deve essere il nome di un stato holding che ui-view - che non è ricerca ma search.user.Come mostra right-column di seguito - se questo è, infatti, un genitore...si può saltare (sarà fatto per noi dietro le quinte)

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

Controllare l'esempio funzionante qui