使用ui-router和AngularJS根据当前路由选择不同的报头

Question

使用AngularJS和ui-router。我需要根据当前状态(用户是否登录)加载不同的头。

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

以下是我的一些状态:

• root -一切都基于它
• 根。Protected -有一些特殊的解析语句要访问用户登录时受保护的页面
• root.protected。home -受保护的页面
• 根。login—未受保护的登录页面

我如何定义不同的头(视图+控制器)基于状态?

应该有一个头用户试图访问根。

Answer 1

您可以定义两个模板:一个用于"protected"，另一个用于"login":

    $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代码。更好的解决方案是有一个名为"未保护"的状态，并为它定义两个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用于其容器。使用这种方法，您不需要为每个未受保护的视图(如果有的话)定义标题。所以你只需要写容器模板