使用 angular-ui-router 创建具有多个嵌套视图的布局

Question

我已经尝试了几个使用 ui-路由器和状态管理器的例子。我的嵌套视图和路线没有按我希望的那样工作。这是我如何配置状态的示例：

          $stateProvider                
            .state("main", {
                abstract: true,
                url: "/main",
                views: {
                    "layout": {
                        templateUrl: "main.index.html"
                    },
                    "mainNavigation@main": {
                        templateUrl: "main-navigation-partial.html"
                    }
                },
                onEnter: function() {
                    console.log("enter main");
                }
            })
            .state("main.dashboard", {
                url: "/dashboard",

                views: {
                    "container@main": {
                        templateUrl:"main-dashboard.html"
                    }
                }
            });

如您所见，我有一个名为 main 的抽象状态。所有主视图都将使用 mainNavigation 视图。还有一个容器视图区域，每个部分的内容都将驻留在其中。有一个 index.html 将被所有州使用。所以，我可能会在未来有一个抽象的状态名称 client 以及伴随的状态和视图。

我可以看到单独的 html 文件正在加载，但视图没有填充到正确命名的视图区域中。我有 created a plunk 演示了我想如何管理我的模板和视图。

Answer 1

您的主要状态正在将 main.index.html 加载到名为 layout 的 ui 视图中。在你的 plunker 中，你的根 ui-view 是未命名的。因此，要解决此问题，请为该 ui-view 添加一个名称。

http://plnkr.co/edit/xKDcuk99OACQR73LR0hf?p=preview

<div ui-view='layout'>

或者，您可以保留 ui- 视图未命名并更改视图以反映这一点。

"": {
  templateUrl: "main.index.html"
}

有关视图命名的更多信息，请参阅 ui-router wiki。