好的,所以我正在尝试将嵌套 View 和多个 View 与 angular-ui-router 结合起来。
我有以下 HTML:
Index.html
<div ui-view="viewA"></div>
viewA.html
index.viewA
<div ui-view="viewANested"></div>
viewANested.html
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 是 here ,我正在尝试组合多个 View 和嵌套 View ,但它对我不起作用。我可以看到外部 View 很好,但内部 View 没有任何乐趣,控制台中没有错误。
为了简单起见,我从示例中删除了多个 View ,但如果它们存在,HTML/Javascript 的结构不会发生变化。
我也试过这个javascript:
myapp.config(function($stateProvider){
$stateProvider
.state('index', {
url: "",
views: {
"viewA": {
templateUrl: "viewA.html",
}
"viewANested": {
templateUrl: "viewANested.html",
}
}
});
})
这也不起作用(结合将 ui-view 属性更改为“viewA.Nested”):
myapp.config(function($stateProvider){
$stateProvider
.state('index', {
url: "",
views: {
"viewA": {
templateUrl: "viewA.html"
},
"viewA.Nested":{
templateUrl: "viewANested.html"
}
}
});
})
仍然没有快乐,我想不出任何其他方法来做到这一点,有人可以阐明我哪里出错了吗?
我是在犯错还是这是框架本身的限制?
我认为替代方案是采用更扁平的结构,并在我的索引页面上添加大部分未使用的 div,如果需要将内容放入更复杂的页面中,我可以使用它,这是可行的方法吗?这似乎有点 hacky。
谢谢
最佳答案
你快到了。与 ui-router
我们可以为一个状态定义许多/嵌套 View 。更新的plunker is here .我已经使用了您的最后一次尝试,这是我所做的唯一更改:
$stateProvider
.state('index', {
url: "",
views: {
"viewA": {
templateUrl: "viewA.html"
},
// "viewA.Nested":{
"viewANested@index":{
templateUrl: "viewANested.html"
}
}
});
正如我们所见,不是 name "viewA.Nested"
我用过这个: "viewANested@index"
最重要的部分是分隔符 @
后跟州名 index
- 这是目标 View 名称 viewANested
搜索过。
在此处查看文档和更多信息:
关于javascript - 为单个状态组合嵌套 View 和多个 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24616367/