我有一个如下的配置:
...
.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
模板内有2个更多的命名视图。leftSidePaneModule
模板看起来像这样:
leftSidePaneModule.html
<div>
<div ui-view="leftWidgetOne"></div>
<div ui-view="leftWidgetTwo"></div>
</div>
如何制作模块leftWidgetOne
&leftWidgetOne
被填充到上面的占位符?
I tried,
...
.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' : {...}
}
}
}
})
...
两个都不工作。
你是怎么做的?
谢谢!
解决方案可以在这里找到:视图名称-相对名称与绝对名称。引用:
关键是,我们可以使用在幕后,每个视图被分配一个绝对名称,遵循
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>',
},
}
});
还有一个柱塞显示上述代码的运行