为单个状态组合嵌套视图和多个视图 [英] Combining nested and multiple views for a single state

问题描述

好的，所以我正在尝试将嵌套视图和多个视图与 angular-ui-router 结合起来.

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",
            }
        }
    });
})

这也不起作用(结合将 ui-view 属性更改为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，如果需要，我可以使用它来将内容放入更复杂的页面，这是要走的路吗?这似乎有点hacky.

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-router 我们可以为一个状态定义多个/嵌套的视图.更新后的 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@index"

As we can see, instead of name "viewA.Nested" I used this: "viewANested@index"

最重要的部分是分隔符 @ 后跟状态名称 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.

在此处查看文档及更多内容:

See the doc and more here:

• 查看名称 - 相对名称与绝对名称

这篇关于为单个状态组合嵌套视图和多个视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！