Javascript 为单个状态组合嵌套视图和多个视图
好的,我正在尝试将嵌套视图和多视图与angular ui router结合起来 我有以下HTML: Index.htmlJavascript 为单个状态组合嵌套视图和多个视图,javascript,angularjs,angular-ui-router,Javascript,Angularjs,Angular Ui Router,好的,我正在尝试将嵌套视图和多视图与angular ui router结合起来 我有以下HTML: Index.html <div ui-view="viewA"></div> index.viewA <div ui-view="viewANested"></div> index.viewA.nested 以及以下javascript: var myapp = angular.module('myapp', ["ui.router"]) m
<div ui-view="viewA"></div>
index.viewA
<div ui-view="viewANested"></div>
index.viewA.nested
以及以下javascript:
var myapp = angular.module('myapp', ["ui.router"])
myapp.config(function($stateProvider){
$stateProvider
.state('index', {
url: "",
views: {
"viewA": {
templateUrl: "viewA.html",
views: {
"viewANested":{
templateUrl: "viewANested.html"
}
}
}
}
});
})
plunker是这样的,我正在尝试合并多个视图和嵌套视图,但它对我不起作用。我可以很好地看到外部视图,但内部视图没有乐趣,控制台中没有错误
为了简单起见,我已经从示例中删除了多个视图,但是如果HTML/Javascript存在,它们的结构不会改变
我也尝试过这个javascript:
myapp.config(function($stateProvider){
$stateProvider
.state('index', {
url: "",
views: {
"viewA": {
templateUrl: "viewA.html",
}
"viewANested": {
templateUrl: "viewANested.html",
}
}
});
})
这也不起作用(与将ui视图更改为“viewA.Nested”属性相结合):
仍然没有乐趣,我想不出任何其他方法来做这件事,有人能告诉我哪里出了问题吗
我是否犯了错误,或者这是框架本身的一个限制
我认为另一种选择是在我的索引页面上有一个更平坦的结构和额外的大部分未使用的div,如果有必要将内容放入更复杂的页面,我可以使用这些div,这是一种方法吗?它似乎有点黑
谢谢你就快到了。使用
ui路由器
我们可以为一个状态定义多个/嵌套视图。该报告已更新。我使用了你上次的尝试,这是我唯一的改变:
$stateProvider
.state('index', {
url: "",
views: {
"viewA": {
templateUrl: "viewA.html"
},
// "viewA.Nested":{
"viewANested@index":{
templateUrl: "viewANested.html"
}
}
});
正如我们所看到的,我没有使用名称“viewA.Nested”
而是使用了以下内容:”viewANested@index“
最重要的部分是分隔符@
,后面是状态名索引
——这是搜索视图名的目标
请参见此处的文档和更多内容:
在这里看一看示例演示/plnkr:这是否在嵌套的更深处起作用?是viewANested@index.detail
有效吗?我在想这是否是我的问题。我和@Pureferret有同样的问题。假设ViewAnesed中有另一个视图,我们如何放置它?
$stateProvider
.state('index', {
url: "",
views: {
"viewA": {
templateUrl: "viewA.html"
},
// "viewA.Nested":{
"viewANested@index":{
templateUrl: "viewANested.html"
}
}
});