Question

我一直在尝试在Angular JS App中实现页眉/页脚。我想在主index.html中添加这些作为ng-include。但是，如果页眉和页脚是静态页面，这将起作用。我的情况稍有不同......在登录页面中没有显示页眉/页脚。其他页面取决于您是否登录，您必须显示“欢迎用户[注销]”或“欢迎客人[登录]”。

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

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

类似的问题在这里：Refresh header page in angularjs

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

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

1 个答案: