javascript - 为单个状态组合嵌套 View 和多个 View

Question

好的，所以我正在尝试将嵌套 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。

谢谢

Answer 1

你快到了。与 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 搜索过。

在此处查看文档和更多信息:

• View Names - Relative vs. Absolute Names