Question

我尝试了几个使用ui-router和状态管理器的例子。我的嵌套视图和路径不能正常工作。以下是我如何配置状态的示例：

          $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-view并更改视图以反映该内容。

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

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

使用angular-ui-router

1 个答案: