AngularJS UI路由器：如何配置嵌套的命名视图？ [英] AngularJS UI router: How to configure nested named views?

问题描述

我有一个类似的配置如下：

I have a configuration like below:

...
.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 模块被填充到用户界面视图='leftSidePaneModule'占位符。但问题是，我有2 leftSidePaneModule 模板内更多的命名视图。 leftSidePaneModule 模板看起来是这样的：

So, leftSidePaneModule module gets populated in to ui-view='leftSidePaneModule' placeholder. But the problem is, I have 2 more named views inside leftSidePaneModule template. leftSidePaneModule template looks like this:

leftSidePaneModule.html

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

我如何模块 leftWidgetOne ＆安培; leftWidgetOne 获取上述占位符填充？

How do i make modules leftWidgetOne & leftWidgetOne gets populated in to above placeholder?

我试过了，

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

两者都不能正常工作。

Both are not working.

你怎么办呢？

谢谢！

推荐答案

该解决方案可以在这里找到：<一href=\"https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#view-names---relative-vs-absolute-names\">View名称 - 相对与绝对名称。一个举：

The solution could be found here: View Names - Relative vs. Absolute Names. A cite:

幕后花絮，每个视图被分配遵循视图名@ Statename的的方案，其中视图名是视图指令和状态名称是国家绝对名称，比如所使用的名称 contact.item 结果
  ...结果
  的（注：在我们的情况下，它必须是配置文件）的。

Behind the scenes, every view gets assigned an absolute name that follows a scheme of viewname@statename, where viewname is the name used in the view directive and state name is the state's absolute name, e.g. contact.item
...
(note: in our case it must be 'profiles').

问题的关键是，我们可以使用完整的（绝对）的的视图名称，在当前被部分状态定义：

The point is, that we can use the full (absolute) name of the view, being part of the current state definition:

$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 显示上述行动code

There is also plunker showing the above code in action

这篇关于AngularJS UI路由器：如何配置嵌套的命名视图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！