AngularJS - 处理重复的片段，如页眉和页脚 [英] AngularJS - Handle repeated fragments like Header and Footer

问题描述

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

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

如果我将标题代码移动到各个视图中，则一切正常.

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

解决方案

按照 ivarni 的建议，在页眉/页脚中使用控制器.来自我自己的(实验性)应用的示例:

在 index.html 中，header 会显示动态生成的菜单、登录/注销等:

<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="容器"><div><ul class="nav"><li x-ng-repeat="menuEntry in menuEntries"><a x-ng-href="#{{menuEntry.path}}">{{menuEntry.display}}</a>

<div x-ng-if="userData.loggedIn">欢迎{{userData.userName}}！<a x-ng-click="logout()">注销</a>

<div x-ng-if="!userData.loggedIn"><a x-ng-click="login()">登录</a>

因此根据 showHeader 范围变量隐藏整个标记.它动态创建菜单(menuEntries).并根据 userData.loggedIn，相应的登录/注销消息.

I have been trying to implement the header / footer in an Angular JS App. I was thinking of adding these as ng-include in the main index.html. However this would have worked if the header and footer are static pages. My case is slightly different... In Login page no header / footer is shown. Other pages depending on whether you are logged in or not, you have to show "Welcome user [ logout] " or "Welcome guest [ login ]".

I save the login information in the rootScope as well as set a boolean $rootScope.isLoggedIn on login. The biggest problem seems to be that the whole ng-include is not refreshed on a logoff. Hence divs with ng-show hide directives will not hide/show on change. Somebody suggested using ng-switch - it also behaves the same way.

If I move the header code inside individual views then everything is fine.

A similar question is here: Refresh header page in angularjs

解决方案

Use a controller in the header/footer, as ivarni suggested. An example from an (experimental) app of my own:

In the index.html, the header will display a dynamically generated menu, login/logout etc:

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

The NavbarCtrl builds the appropriate scope for the app/main/navbar.html template. The template would be as follows (taking into account your needs - and irrelevant details removed):

<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>

So the entire markup is hidden depending on the showHeader scope variable. It creates the menu dynamically (menuEntries). And depending on userData.loggedIn, the appropriate Login/Logout message.

这篇关于AngularJS - 处理重复的片段，如页眉和页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！