Question

使用AngularJS和ui-router。我需要根据当前状态（用户是否已记录）加载不同的标头。

<div ui-view="header"></div>
<div ui-view="container"></div>

以下是我所拥有的一些州：

root - 一切都基于它
root.protected - 要访问一些特殊的resolve语句记录用户时受保护的页面
root.protected.home - 受保护的页面
root.login - 一个不受保护的登录页面

如何根据状态定义不同的标题（视图+控制器）？

用户尝试访问root.login时应该有一个标头，访问root.protected.home应该有不同的标头。

Answer 1

您可以定义两个模板：一个用于“受保护”，另一个用于“登录”：

    $stateProvider
        .state("root", {
            abstract: true,
            template: "<ui-view/>"
        })
        .state("root.protected", {
            abstract: true,
            template: '<div ui-view="header"></div><div ui-view="container"></div>'
        })
        .state("root.protected.home", {
            url: "/home",
            views: {
                header: { templateUrl: "/home-header.html" },
                container: { templateUrl: "/home-container.html" }
            }
        })
        .state("root.login", {
            url: "/login",
            templateUrl: "/login.html",
            controller: "loginController"
        });

您可以在login.html中编写完整的登录HTML代码。更好的解决方案是建立一个名为“unprotected”的状态，并为其定义两个ui-view：

        .state("root.unprotected", {
            abstract: true,
            template: '<div ui-view="header"></div><div ui-view="container"></div>'
        })
        .state("root.unprotected.login", {
            url: "/login",
            views: {
                header: { templateUrl: "/login-header.html", controller: "loginHeaderController" },
                container: { templateUrl: "/login-container.html", controller: "loginContainerController" }
            }
        });

另一个更好的解决方案是不为未受保护的标题部分定义ui-view，并为其容器只有一个ui-view。使用此方法，您无需为每个未受保护的视图定义标头（如果有的话）。所以你只需要编写容器模板。

使用ui-router和AngularJS基于当前路由的不同报头

1 个答案: