Question

好的，所以我试图用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，我正在尝试将多个视图和嵌套视图结合起来，但它并不适用于我。我可以看到外部视图很好，但内部视图没有任何乐趣，控制台中没有错误。

为了简单起见，我已从示例中删除了多个视图，但如果HTML / Javascript存在，则HTML / Javascript的结构不会发生变化。

我也试过这个javascript：

myapp.config(function($stateProvider){
$stateProvider
    .state('index', {
        url: "",
        views: {
            "viewA": {
                templateUrl: "viewA.html",
            }
            "viewANested": {
                templateUrl: "viewANested.html",
            }
        }
    });
})

这也不起作用（结合将 ui-view 属性更改为＆＃39; viewA.Nested＆＃39;）：

myapp.config(function($stateProvider){
$stateProvider
    .state('index', {
        url: "",
        views: {
            "viewA": {
                templateUrl: "viewA.html"
            },
            "viewA.Nested":{
              templateUrl: "viewANested.html"
            }
        }
    });
})

仍然没有快乐，我无法想到任何其他方式来做到这一点，有人可以说明我出错的地方吗？

我犯了错误还是这个框架本身的限制？

我认为另一种选择是拥有一个更扁平的结构，并且我的索引页面上除了大部分未使用的div，如果需要将内容放入更复杂的页面，我可以使用，这是要走的路吗？这看起来有点哈哈。

由于

Answer 1

你快到了。使用ui-router，我们可以为一个状态定义许多/嵌套视图。更新后的plunker is here。我已经使用了你的最后一次尝试，这是我做的唯一改变：

$stateProvider
    .state('index', {
        url: "",
        views: {
        "viewA": {
            templateUrl: "viewA.html"
          },
          // "viewA.Nested":{
          "viewANested@index":{
            templateUrl: "viewANested.html"
          }
        }
    });

我们可以看到，我使用了 "viewA.Nested"

而不是名称 "viewANested@index"

最重要的部分是分隔符 @ ，后跟状态名称 index - 这是目标，其中视图名称 viewANested 搜索了。

请参阅文档及更多内容：

View Names - Relative vs. Absolute Names

将嵌套视图和多个视图组合为单个状态

1 个答案: