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

Posted 2023-02-22

【中文标题】AngularJS UI 路由器：如何配置嵌套命名视图？

【英文标题】：AngularJS UI router: How to configure nested named views?

【发布时间】：2014-06-28 17:25:35

【问题描述】：

我有如下配置：

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

Jade 主文件

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

两者都不工作。

你是怎么做到的？

谢谢！

【问题讨论】：

这可能会帮助你：***.com/questions/12863663/…

这些是不是嵌套视图...它们是平行的...

【参考方案1】：

可以在此处找到解决方案：View Names - Relative vs. Absolute Names。引用：

在幕后，每个视图都被分配了一个遵循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 展示了上面的代码

【讨论】：

谢谢。帮了大忙！

说真的，感谢您对此的解释。我无法告诉你我花了多长时间试图弄清楚这一点。

这需要被投票多次。我一直在寻找这个。

我也一直在寻找这个，这非常有帮助，非常感谢！

非常感谢，我无法让它工作，我尝试了几个小时没有成功