ui-router le remplissage de templateurl et contrôleurs de imbriquée états abstraits avec des vues imbriquées

Question

J'ai fait des expériences avec ui-router et j'ai rencontré un peu un caprice.Je suis incapable de remplir une vue de dessous un résumé de l'état.Il semble que, bien que l'état est actif, l'affichage n'est pas trouvé

Voici un exemple :

l'état fournisseur de :

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

J'ai la page état du flux que j'essaie de le faire est :

1) premier chargement du site de recherche.liste (qui se propage jusqu'à

• 1.un:charge layout.html dans l'interface utilisateur par défaut-pour afficher dans index.html via le '@' affichage'
• 1.b: search.html est chargé par la "pleine page" vue en layout.html puis
• 1.c: user.list.html est chargé par la content-container@search vue dans la recherche.état de la liste.Cela fonctionne bien et dandy

2) en cliquant sur la liste créée dans user.list.html les charges de recherche.de l'utilisateur.point de vue qui devrait?bulle de nouveau à la recherche.de l'utilisateur,

• 2.une charge user.detail.html dans le content-container@search vue de search.html alors (cela fonctionne)
• 2.b charge dans user.detail.view.html dans le ui-view='left-column' div de user.detail.html.(cela ne fonctionne pas, "à gauche de la colonne" affichage est vide.)

J'ai d'abord pensé que ce code effectue le même modèle de résumé d'état de l'interface utilisateur-vue de la population deux fois (une fois pour l'utilisateur.liste, l'autre pour l'utilisateur.détail.vue) toutefois, il apparaît que ce n'est pas le cas.Il semble que la "left-column" vue de la recherche est effectuée avant le contenu d'un container est rempli

Je suis nouveau à l'interface utilisateur-routeur, donc j'ai peut-être une idée fausse de la séquence de la façon dont états abstraits de remplir ou de l'utilisation prévue des états abstraits.

Answer 1

Vous y êtes presque, voici un travail plunker.Les changements que j'ai faits

user.detail.html

pas la ng-view mais 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>

état de la recherche.de l'utilisateur.la vue'

la partie après @ séparateur doit être le nom d'un état la tenue que ui-view - ce qui n'est pas recherche mais search.user.Comme je l'ai indiquer sur la right-column ci-dessous - si cela est, en fait, des parents,...nous pouvons l'ignorer (sera fait pour nous derrière la scène)

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

Vérifier le travail de l'exemple ici