使用ui路由器和AngularJS基于当前路由的不同头

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

以下是我的一些状态：

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

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

---

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

您可以定义两个模板：一个用于“protected”，另一个用于“login”：

---

还有一个更好的解决方案是，不为未受保护的标题部分定义

ui视图

，而只为其容器定义一个

ui视图

。使用这种方法，您不需要为每个未受保护的视图（如果有）定义标题。所以您只需要编写容器模板。

谢谢您的回复。虽然我想使用相同的基本模板，但对于root和root.protected，它帮助我解决了一个问题，即我必须在root.protected状态下替换头视图$stateProvider.state（“root.protected”，{abstract:true，views:{'header@'：{templateUrl:emiconfig.baseDir+“/views/partials/header protected.html”，}，

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

    $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"
        });

        .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" }
            }
        });