问题描述
我想知道是否有可能没有嵌套视图的嵌套状态.假设我有这个设置:
I'm wondering if it's possible to have a nested state without a nested view. Suppose I have this setup:
App.config(function($stateProvider, $urlRouterProvider) {
//
//
// Now set up the states
$stateProvider
.state('index', {
url: "/index",
templateUrl: "views/home.html",
controller: "MainController",
ncyBreadcrumb: {
label: 'Home'
}
})
.state('About', {
url: "/about",
templateUrl: "views/about.html",
controller: "AboutController",
ncyBreadcrumb: {
label: 'About',
parent: 'index'
}
})
.state('us', {
url: "/us",
templateUrl: "views/us.html",
controller: "UsController",
parent: 'about',
ncyBreadcrumb: {
label: 'Us'
}
})
//
// For any unmatched url, redirect to /home
$urlRouterProvider.otherwise("/index");
});
当我访问 /about
时,我会看到关于页面.当我访问 /about/us
时,我仍然得到 about 页面,在 about 页面的 ui-view
中加载了 us 页面.但是,我想要做的是加载 /about
上的 about 页面和 /us
上的 us 页面.这可能吗?
When I visit /about
, I get the about page. When I visit /about/us
, I still get the about page with the us page loaded in the ui-view
of the about page. However, what I would like to do is load the about page on /about
and just the us page on /us
. Is this possible?
推荐答案
是的,这是可能的.我们必须使用的是绝对命名.状态定义如下所示:
Yes it is possible. What we have to use, is the absolute naming. State defintion would look like this:
.state('us', {
url: "/us",
views : {
"@" : { // here we are using absolute name targeting
templateUrl: "views/us.html",
controller: "UsController",
},
}
parent: 'about',
ncyBreadcrumb: {
label: 'Us'
}
})
见文档:
在幕后,每个视图都被分配一个绝对名称,遵循 viewname@statename
方案,其中 viewname 是视图指令和状态名称中使用的名称是状态的绝对名称,例如联系方式.您还可以选择以绝对语法编写视图名称.
例如,前面的例子也可以写成:
For example, the previous example could also be written as:
.state('report',{
views: {
'filters@': { },
'tabledata@': { },
'graph@': { }
}
})
如文档所示,我们可以使用绝对命名.在我们的例子中,我们将定位 nams 为空字符串 (index.html) 的根状态 - 分隔符 @ 之后的部分.它是未命名的视图 - @ 之前的字符串为空.这就是为什么我们使用:
So as documentation shows, we can use absolute naming. In our case, we will target root state which nams is string empty (index.html) - the part after delimiter @. And it is unnamed view - string Empty before @. That is why we use:
views : {
"@" : {
注意:在幕后,UI-Router
将其用于状态 us
:
NOTE: behind the scenes, UI-Router
used this for state us
:
views : {
"@about" : {
有一个工作plunker,这些状态在起作用:
There is a working plunker, with these states in action:
// States
$stateProvider
.state('index', {
url: "/index",
templateUrl: 'tpl.html',
})
.state('about', {
url: "/about",
templateUrl: 'tpl.html',
})
.state('us', {
url: "/us",
parent: "about",
views : {
'@': {
templateUrl: 'tpl.html',
},
}
})
在 action 中检查,如果us"是州名,则 ui-sref=我们"将正确导航到 '/about/us'
.
Check it in action that if the 'us' is a state name the ui-sref="us" will properly navigate to '/about/us'
.
这篇关于没有嵌套视图的嵌套 ui-router 状态?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!