Question

我想在所有模块中使用stateprovider视图模板..

所以，在index.html我有这个：

<div ui-view="nav"></div>
<div ui-view></div>
<div ui-view="footer"></div>

然后我的配置是这样的：

$urlRouterProvider.otherwise('/');

$stateProvider.
    state("home",
    {
        url: "/",
        views: {
            "": {
                templateUrl: "main.html"
            },
            "nav": {
                templateUrl: "modules/nav/nav.html"
            },
            "footer": {
                templateUrl: "modules/footer/footer.html"
            }
        }
});

这对于root和默认路由非常好，但是如果我导航到localhost：8000 / page1，那么使用此配置看不到导航和页脚：

$stateProvider.
    state("page1",
    {
        url: "/page1",
        views: {
            "": {
                templateUrl: "modules/page1/page1.html"
            }
        }
    });

当我添加带有模板的导航和页脚视图到配置时，它当然正在工作。但是我不想将这些相同的视图和templateUrls添加到我的所有页面和模块中。我可以定义它在我的主配置中为默认路由定义的任何地方都有效吗？

还是我必须使用ng-include？因为使用ng-include工作正常，但我认为使用ui-view会更好：）

有人有解决方案吗？

非常感谢

Answer 1

您应该与父母一起扩展您的'page1'州。该父级可以包含所有定义，可以共享，其他子级状态只能从中获利：

state("root",
{
    // this state will not use any url, it is just a wrapper
    // url: "/",
    views: {
        // place hoder for child
        "": {
            template: '<div ui-view=""></div>'
        },
        "nav": {
            templateUrl: "modules/nav/nav.html"
        },
        "footer": {
            templateUrl: "modules/footer/footer.html"
        }
    }
  ...

现在任何州都可以使用父级（如果我们使用设置parent，它就不会影响网址名称）：

state("page1",
{
    parent: "root"
    url: "/page1",
    // no need to define views, if we target the unnamed in the parent
    templateUrl: "modules/page1/page1.html"
});

所以，现在，＆＃34; page1＆＃34; state有自己的url（不是从父级继承）。它还将所有内容注入index.html（感谢父根）。而且，它确实以父母未命名的视图为目标......

更多详情：

与一名工作人员的类似问题：

Angular UI Router - Nested States with multiple layouts

在所有模块中使用stateProvider视图

1 个答案: