5

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

4

1 回答 1

7

正如 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，适当的登录/注销消息。

于 2013-10-10T07:23:17.180 回答