结合嵌套和多视图为一个单一的国家 [英] Combining nested and multiple views for a single state

问题描述

好了，所以我想这两个嵌套和多个视图具有角的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

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