AngularJS UI router: Как настроить вложенные именованные представления?

У меня есть такая конфигурация, как показано ниже:

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

Основной файл нефрита

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

Итак, модуль leftSidePaneModule заносится в ui-view='leftSidePaneModule' placeholder. Но проблема в том, что у меня есть еще два имени по имени внутри шаблона leftSidePaneModule. Шаблон leftSidePaneModule выглядит следующим образом:

leftSidePaneModule.html

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

Как я могу сделать модули leftWidgetOne и leftWidgetOne заселенными в вышезаполнитель?

Я пробовал,

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

Попытка: 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' : {...}
          }
      }
    }
  })
...

Оба не работают.

Как вы это делаете?

Спасибо!

Ответ 1

Решение можно найти здесь: Просмотреть имена - относительные и абсолютные имена. Цитата:

За кулисами каждому представлению присваивается абсолютное имя, которое следует схеме [email protected], где viewname - это имя, используемое в директиве view и имя состояния - это состояние абсолютное имя, например contact.item
...
(обратите внимание: в нашем случае это должно быть 'profiles').

Дело в том, что мы можем использовать полное (абсолютное) имя view, являющееся частью определения состояния current:

$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">
            '[email protected]': {
                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 '[email protected]'
            '[email protected]': {
                template: '<h2>One</2>',
            },
            '[email protected]': {
                template: '<h2>Two</2>',
            },
        }
    });

Существует также plunker, показывающий приведенный выше код в действии