好了,所以我想这两个嵌套和多个视图具有角的UI路由器相结合。
Ok so I am trying to combine both nested and multiple views with 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:
And the following 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是这里,我想这两个结合多和嵌套的观点,但它不是为我工作。我可以看到内层的外部视图就好了,但没有喜悦,在控制台中没有错误。
A plunker is here, I am trying to combine both multiple and nested views but it isn't working for me. I can see the outer view just fine but no joy in the inner one, with no errors in the console.
为了简单起见,我已移除的示例中的多个视图,但是HTML /的Javascript不会在结构上,如果他们有变化。
For the sake of simplicity I have removed the multiple views from the example, but the HTML/Javascript wouldn't change in structure if they were there.
我曾尝试这个JavaScript也是:
I have tried this javascript also:
myapp.config(function($stateProvider){
$stateProvider
.state('index', {
url: "",
views: {
"viewA": {
templateUrl: "viewA.html",
}
"viewANested": {
templateUrl: "viewANested.html",
}
}
});
})
这不工作或者(结合改变的用户界面视图属性viewA.Nested')
This isn't working either (combined with changing the ui-view property to 'viewA.Nested'):
myapp.config(function($stateProvider){
$stateProvider
.state('index', {
url: "",
views: {
"viewA": {
templateUrl: "viewA.html"
},
"viewA.Nested":{
templateUrl: "viewANested.html"
}
}
});
})
仍然没有喜悦,我想不出任何其他方式做到这一点,可有人阐明我要去的地方错了一些轻?
Still no joy, I can't think of any other way to do this, can somebody shed some light on where I am going wrong?
我是不是犯了一个错误或者这是框架本身的限制?
Am I making a mistake or is this a limitation of the framework itself?
我觉得选择是有一个平坦的结构,我的索引页面上额外的未使用的大多是div的,我可以使用,如果neccessary将内容转化为更复杂的页面,是要走的路?这似乎有点哈克。
I think the alternative is to have a flatter structure, and extra mostly unused divs on my index page that I can use if neccessary to put content into for more complex pages, is that the way to go? It seems a bit hacky.
感谢
您几乎没有。随着 UI路由器
我们能有一个状态定义了许多/嵌套视图。更新后的 plunker是这里。我用你的最后一次尝试,这就是我所做的唯一的变化:
You are almost there. With ui-router
we can have many/nested views defined for one state. The updated plunker is here. I've used your last attempt, and this is the only change I made:
$stateProvider
.state('index', {
url: "",
views: {
"viewA": {
templateUrl: "viewA.html"
},
// "viewA.Nested":{
"viewANested@index":{
templateUrl: "viewANested.html"
}
}
});
我们可以看到,而不是名称 viewA.Nested
我用这个: viewANested @指数
As we can see, instead of name "viewA.Nested"
I used this: "viewANested@index"
中最重要的部分是分隔符的 @
后跟州名 首页
- 这是在哪里视图名称目标的 viewANested
搜索
The most important part is the delimiter @
followed by state name index
- which is the target where is the view name viewANested
searched for.
查看doc和更多在这里:
See the doc and more here:
视图名称 - 相对与绝对名称 View Names - Relative vs. Absolute Names