AngularJS UI路由器：如何配置嵌套的命名视图？

Question

我有如下配置：

...
.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'占位符中。 但问题是，我在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'
      }
      , 'leftWidgetOne@leftSidePaneModule' : {...}
      , 'leftWidgetTwo@leftSidePaneModule' : {...}
    }
  })
...

尝试：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' : {...}
          }
      }
    }
  })
...

两者都不起作用。

你怎么做呢？

谢谢！

Answer 1

解决方案可以在这里找到： 视图名称 - 相对名称和绝对名称 。 引用：

在幕后，为每个视图分配一个绝对名称，该名称遵循viewname@statename的方案，其中viewname是view指令中使用的名称， 状态名称是状态的绝对名称，例如contact.item
...
（注意：在我们的例子中，它必须是'profiles' ） 。

关键是，我们可以使用view的完整（绝对）名称，作为当前状态定义的一部分：

$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>',
            },
        }
    });

还有一个plunker显示上面的代码在行动