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

Question

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

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

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

类似的问题在这里:在angularjs中刷新页眉页面

Answer 1

如标题所示,在页眉/页脚中使用控制器.我自己的(实验性)应用程序的一个例子:

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