我想知道是否有可能没有嵌套视图的嵌套状态。假设我有这个设置：
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，我仍然得到加载了美国页面的关于页面 ui-view 约页面。但是，我想要做的是加载about页面 /about 而且只是美国页面 /us。这可能吗？
对的，这是可能的。我们必须使用的是绝对命名。州定义如下：
.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是view指令中使用的名称，state name是状态的绝对名称，例如： contact.item。您还可以选择以绝对语法编写视图名称。
例如，前面的示例也可以写成：
.state('report',{
views: {
'filters@': { },
'tabledata@': { },
'graph@': { }
}
})
因此，正如文档所示，我们可以使用绝对命名。在我们的例子中，我们将目标根目录状态为nams为字符串为空（index.html） - 分隔符@ @之后的部分。它是未命名的视图 - 在@之前字符串为空。这就是我们使用的原因：
views : {
"@" : {
注意：在幕后， UI-Router 用于国家 us：
views : {
"@about" : {
有一个 工作的plunker，这些状态在起作用：
// 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',
},
}
})
检查一下 行动 如果'us'是州名，则ui-sref =“us”将正确导航到 '/about/us'。
对的，这是可能的。我们必须使用的是绝对命名。州定义如下：
.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是view指令中使用的名称，state name是状态的绝对名称，例如： contact.item。您还可以选择以绝对语法编写视图名称。
例如，前面的示例也可以写成：
.state('report',{
views: {
'filters@': { },
'tabledata@': { },
'graph@': { }
}
})
因此，正如文档所示，我们可以使用绝对命名。在我们的例子中，我们将目标根目录状态为nams为字符串为空（index.html） - 分隔符@ @之后的部分。它是未命名的视图 - 在@之前字符串为空。这就是我们使用的原因：
views : {
"@" : {
注意：在幕后， UI-Router 用于国家 us：
views : {
"@about" : {
有一个 工作的plunker，这些状态在起作用：
// 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',
},
}
})
检查一下 行动 如果'us'是州名，则ui-sref =“us”将正确导航到 '/about/us'。
当然，仅仅因为国家分享网址的一部分并不意味着它必须是父/子关系。只需设置 us 国家的网址 /about/us 并且不要给它父母。
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: "/about/us",
templateUrl: "views/us.html",
controller: "UsController",
ncyBreadcrumb: {
label: 'Us'
}
})
//
// For any unmatched url, redirect to /home
$urlRouterProvider.otherwise("/index");
});