router UI AngularJS: come configurare viste denominate nidificate?

Question

Ho una configurazione come di seguito:

... 
.state('profiles', { 
    abstract: true 
    , url : '/profiles' 
    , resolve: {...}  
    , views: { 
     mainModule: { 
     templateUrl : '/partials/home.html' 
     , controller : 'HomeCtrl' 
     } 
     , leftSidePaneModule: { 
      templateUrl : '/partials/leftSidePane.html' 
      , controller : 'LeftSidePaneCtrl' 
     } 
    } 
    }) 
... 

principale Jade file

... 
.col-xs-4.col-md-4.chat_block(ui-view='leftSidePaneModule', autoscroll="false") 
... 

Quindi, modulo leftSidePaneModule viene popolata per ui-view='leftSidePaneModule' segnaposto. Ma il problema è che ho 2 altre viste con nome all'interno del modello leftSidePaneModule. leftSidePaneModule modello si presenta così:

leftSidePaneModule.html

<div> 
    <div ui-view="leftWidgetOne"></div> 
    <div ui-view="leftWidgetTwo"></div> 
</div> 

Come faccio moduli leftWidgetOne & leftWidgetOne ottiene popolata sopra segnaposto?

ho provato,

... 
.state('profiles', { 
    abstract: true 
    , url : '/profiles' 
    , resolve: {...}  
    , views: { 
     mainModule: { 
     templateUrl : '/partials/home.html' 
     , controller : 'HomeCtrl' 
     } 
     , leftSidePaneModule: { 
      templateUrl : '/partials/leftSidePane.html' 
      , controller : 'LeftSidePaneCtrl' 
     } 
     , 'leftWidgetOne@leftSidePaneModule' : {...} 
     , 'leftWidgetTwo@leftSidePaneModule' : {...} 
    } 
    }) 
... 

Tentativo: 2

... 
.state('profiles', { 
    abstract: true 
    , url : '/profiles' 
    , resolve: {...}  
    , views: { 
     mainModule: { 
     templateUrl : '/partials/home.html' 
     , controller : 'HomeCtrl' 
     } 
     , leftSidePaneModule: { 
      templateUrl : '/partials/leftSidePane.html' 
      , controller : 'LeftSidePaneCtrl' 
      , views: { 
      'leftWidgetOne' : {...} 
      , 'leftWidgetTwo' : {...} 
      } 
     } 
    } 
    }) 
... 

Entrambi non stanno lavorando.

Come si fa?

Grazie!

Answer 1

La soluzione è stata trovata qui: View Names - Relative vs. Absolute Names. A citare:

Dietro le quinte, ogni vista viene assegnato un nome di assoluto che segue uno schema di viewname@statename, dove viewname è il nome utilizzato nel view direttiva e Stato nome è il nome assoluto dello stato, ad esempio, contact.item
...
(nota: nel nostro caso deve essere 'profiles').

Il punto è che possiamo utilizzare appieno (assoluto) nome del view, essendo parte della corrente definizione stato :

$stateProvider 
    .state('profiles', { 
     url: '/profiles', 
     views: { 
      mainModule: { 
       template: '<div>' + 
          ' <h1>Main</h1>' + 
          ' <div ui-view="leftSidePaneModule"></div>' + 
          '</div>', 
      }, 
      // here we do target the view just added above, as a 'mainModule' 
      // as <div ui-view="leftSidePaneModule"> 
      'leftSidePaneModule@profiles': { 
       template: '<div>' + 
          ' <div ui-view="leftWidgetOne"></div>' + 
          ' <div ui-view="leftWidgetTwo"></div>' + 
          '</div>', 
      }, 
      // and here we do target the sub view 
      // but still part of the state 'profiles' defined in the above 
      // view defintion 'leftSidePaneModule@profiles' 
      'leftWidgetOne@profiles': { 
       template: '<h2>One</2>', 
      }, 
      'leftWidgetTwo@profiles': { 
       template: '<h2>Two</2>', 
      }, 
     } 
    }); 

C'è anche plunker mostra la sopra codice in azione