我一直在尝试在Angular JS App中实现页眉/页脚。我想在主index.html中添加这些作为ng-include。但是,如果页眉和页脚是静态页面,这将起作用。我的情况稍有不同......在登录页面中没有显示页眉/页脚。其他页面取决于您是否登录,您必须显示“欢迎用户[注销]”或“欢迎客人[登录]”。
我将登录信息保存在rootScope中,并在登录时设置一个布尔$ rootScope.isLoggedIn。最大的问题似乎是整个ng-include在注销时没有刷新。因此,使用ng-show hide指令的div将不会隐藏/显示更改。有人建议使用ng-switch - 它的行为方式也一样。
如果我在单个视图中移动标题代码,那么一切都很好。
类似的问题在这里:Refresh header page in angularjs
答案 0 :(得分: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
,相应的登录/注销消息。