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

AngularJS - Handle repeated fragments like Header and Footer

本文关键字：片段 处理 AngularJS      更新时间：2023-09-26

我一直在尝试在Angular JS应用程序中实现页眉/页脚。我正在考虑将这些作为 ng-include 添加到主索引中.html。但是，如果页眉和页脚是静态页面，这将起作用。我的情况略有不同...在登录页面中，不显示页眉/页脚。其他页面取决于您是否登录，您必须显示"欢迎用户[注销]"或"欢迎访客[登录]"。

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

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

这里有一个类似的问题：在angularjs中刷新标题页面

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

在索引.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，相应的登录/注销消息。

相关文章：