AngularJS - 处理重复的片段像页眉和页脚 [英] AngularJS - Handle repeated fragments like Header and Footer
问题描述
我一直在努力实现在角度JS应用页眉/页脚。我想将这些作为NG-包括在主要的index.html。但是,如果页眉和页脚是静态页面,这将工作过。我的情况略有不同......在登录页面没有显示页眉/页脚。这取决于你在或者没有登录其他网页,你必须表明欢迎用户[注销]或欢迎客人[登录]。
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 ]".
我保存在rootScope登录信息以及设置在登录一个布尔值$ rootScope.isLoggedIn。最大的问题似乎是整个NG-包括不刷新上注销。因此,与NG-显示隐藏指令不会隐藏/显示上变化的DIV。采用NG-开关有人建议 - 它也进行同样的操作。
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.
如果我移动头部code个人观点里面,然后一切都很好。
If I move the header code inside individual views then everything is fine.
一个类似的问题在这里: href=\"http://stackoverflow.com/questions/15432370/refresh-header-page-in-angularjs\">刷新头页
A similar question is here: Refresh header page in angularjs
推荐答案
使用在页眉/页脚的控制器,如ivarni建议。从我自己的(实验)的应用程序的一个例子:
Use a controller in the header/footer, as ivarni suggested. An example from an (experimental) app of my own:
在的index.html,标题会显示一个动态生成的菜单,登录/注销等:
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>
的 NavbarCtrl
建立了应用程序/主/ navbar.html
模板的适当范围。该模板将如下所示(考虑到您的需求 - 以及不相关的细节删除):
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>
所以整个标记是取决于 showHeader
范围的变量隐藏。它动态地创建菜单(的菜单项
)。并根据 userData.loggedIn
,相应的登录/注销信息。
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屋!