javascript AngularJS - 处理重复的片段，如页眉和页脚
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19286813/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS - Handle repeated fragments like Header and Footer
提问by Hari Gangadharan
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 ]".
我一直在尝试在 Angular JS 应用程序中实现页眉/页脚。我正在考虑将这些作为 ng-include 添加到主 index.html 中。但是，如果页眉和页脚是静态页面，这将起作用。我的情况略有不同......在登录页面中没有显示页眉/页脚。其他页面取决于您是否登录，您必须显示“欢迎用户[注销]”或“欢迎访客[登录]”。
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.
我将登录信息保存在 rootScope 中，并在登录时设置了一个布尔值 $rootScope.isLoggedIn。最大的问题似乎是整个 ng-include 在注销时没有刷新。因此，带有 ng-show hide 指令的 div 不会在更改时隐藏/显示。有人建议使用 ng-switch - 它的行为方式也相同。
If I move the header code inside individual views then everything is fine.
如果我在单个视图中移动标题代码，那么一切都很好。
A similar question is here: Refresh header page in angularjs
一个类似的问题在这里：Refresh header page in angularjs
回答by Nikos Paraskevopoulos
Use a controller in the header/footer, as ivarni suggested. An example from an (experimental) app of my own:
正如 ivarni 建议的那样，在页眉/页脚中使用控制器。来自我自己的（实验性）应用程序的示例：
In the index.html, the header will display a dynamically generated menu, login/logout etc:
在 index.html 中，标题将显示动态生成的菜单、登录/注销等：
<div id="navbar" class="navbar navbar-inverse navbar-fixed-top"
x-ng-controller="NavbarCtrl" x-ng-include="'app/main/navbar.html'"></div>
The NavbarCtrlbuilds the appropriate scope for the app/main/navbar.htmltemplate. The template would be as follows (taking into account your needs - and irrelevant details removed):
在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>
So the entire markup is hidden depending on the showHeaderscope variable. It creates the menu dynamically (menuEntries). And depending on userData.loggedIn, the appropriate Login/Logout message.
因此，根据showHeader作用域变量隐藏整个标记。它动态创建菜单 ( menuEntries)。并根据userData.loggedIn，相应的登录/注销消息。
