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

问题描述

我有如下配置:

主玉文件

因此，leftSidePaneModule 模块被填充到 ui-view='leftSidePaneModule' 占位符中.但问题是，我在 leftSidePaneModule 模板中还有 2 个命名视图.leftSidePaneModule 模板看起来像这样:

Main Jade File

leftSidePaneModule.html

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:

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

leftSidePaneModule.html

我如何制作模块 leftWidgetOne &leftWidgetOne 被填充到上面的占位符?

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

我试过了，

尝试:2

两者都不起作用.

你是怎么做到的?

谢谢！

推荐答案

解决方案可以在这里找到:视图名称 - 相对名称与绝对名称.引用:

Thanks!

在幕后，每个视图都被分配了一个绝对名称，该名称遵循 viewname@statename 方案，其中 viewname 是 view<中使用的名称/code> 指令和 state name 是 state 的绝对名称，例如contact.item
...
(注意:在我们的例子中，它必须是 'profiles').

解决方案

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

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

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

'+'<h1>主</h1>'+' <div ui-view="leftSidePaneModule"></div>'+'</div>',},//这里我们确实将上面刚刚添加的视图定位为mainModule"//作为 <div ui-view="leftSidePaneModule">'leftSidePaneModule@profiles':{模板:'

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

'+' <div ui-view="leftWidgetOne"></div>'+' <div ui-view="leftWidgetTwo"></div>'+'</div>',},//这里我们确实以子视图为目标//但仍然是上面定义的状态配置文件"的一部分//查看定义 'leftSidePaneModule@profiles''leftWidgetOne@profiles':{模板:'<h2>One</2>',},'leftWidgetTwo@profiles':{模板:'<h2>二</2>'，},}});

$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 显示了上面的代码运行

There is also plunker showing the above code in action

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