AngularJS-处理重复的片段，例如页眉和页脚

Question

我一直在尝试在Angular JS应用程序中实现页眉/页脚。我正在考虑将这些添加为主要index.html中的ng-
include。但是，如果页眉和页脚是静态页面，则可以使用。我的情况略有不同…在“登录”页面中未显示页眉/页脚。其他页面取决于是否登录，必须显示“Welcome user [注销]”或“ Welcome guest [登录]”。

我将登录信息保存在rootScope中，并在登录时设置布尔$rootScope.isLoggedIn。最大的问题似乎是注销时不会刷新整个ng-include。因此，具有ng-showhide指令的div不会在更改时隐藏/显示。有人建议使用ng-switch-它的行为也相同。

如果我在各个视图中移动标题代码，那么一切都很好。

Answer 1

按照ivarni的建议，在页眉/页脚中使用控制器。我自己的（实验性）应用的示例：

在index.html中，标题将显示动态生成的菜单，登录/注销等：

<div id="navbar" class="navbar navbar-inverse navbar-fixed-top"
    x-ng-controller="NavbarCtrl" x-ng-include="'app/main/navbar.html'"></div>

在NavbarCtrl建立了适当的范围app/main/navbar.html模板。该模板如下（考虑到您的需求-并删除了无关的详细信息）：

<div class="navbar-inner" x-ng-if="showHeader">
    <div class="container">
        <div>
            <ul class="nav">
                <li x-ng-repeat="menuEntry in menuEntries">
                    <a x-ng-href="#{{menuEntry.path}}">{{menuEntry.display}}</a>
                </li>
            </ul>
        </div>
    </div>
    <div x-ng-if="userData.loggedIn">
        Wellcome {{userData.userName}}!
        <a x-ng-click="logout()">Logout</a>
    </div>
    <div x-ng-if="!userData.loggedIn">
        <a x-ng-click="login()">Login</a>
    </div>
</div>

因此，根据showHeader范围变量，整个标记都是隐藏的。它动态创建菜单（menuEntries）。并取决于userData.loggedIn适当的“登录/注销”消息。