Angular UI-Router 如何创建“布局"状态? [英] Angular UI-Router How to create a "layout" state?
问题描述
给定一个像这样的 HTML 文件:
<header ui-view="header"></header><div class="main" ui-view></div><footer ui-view="footer"></footer></html>如何创建一个布局状态，用页眉模板填充页眉"，用页脚模板填充页脚，然后允许子状态填充空的 ui-view?
我想空的 ui-view 也可以命名为 ui-view="main" 之类的东西.
一种方法是使全局根"状态.所以，每一个状态都是它的孩子.像 root.pages、root.pages.edit、root.settings 等.然后您可以为页眉和页脚提供默认模板.
我个人使用的另一种不同方法是使用 ng-include 作为页眉和页脚.
<div id="header" ng-include="'header.tpl.html'"></div><div class="main_container" ui-view>顺便说一句.我在 header.tpl.html 中使用了单独的控制器，它是主 AppCtrl 的子级.:
....Given an HTML file like so:
<html>
<header ui-view="header"></header>
<div class="main" ui-view></div>
<footer ui-view="footer"></footer>
</html>
How would one create a layout state that fills the "header" with a header template, the footer with a footer template, and then allow child states to fill the empty ui-view?
I suppose the empty ui-view could also be named something like ui-view="main".
解决方案 One way is to make a global 'root' state. So, each and every state will be it's child.
Like root.pages, root.pages.edit, root.settings, etc.
Then you can provide default templates for header and footer.
Another way, different approach, that I use personally, is to use ng-include for header and footer.
<body ng-controller="AppCtrl">
<div id="header" ng-include="'header.tpl.html'"></div>
<div class="main_container" ui-view>
</div>
</body>
Btw. I use seperate controller in header.tpl.html, that is a child of main AppCtrl.:
<div id="header" ng-controller="HeaderCtrl"> ....
这篇关于Angular UI-Router 如何创建“布局"状态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
