Angular UI-Router 如何创建“布局"状态?

本文介绍了Angular UI-Router 如何创建“布局"状态?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

给定一个像这样的 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 作为页眉和页脚.

顺便说一句.我在 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 如何创建“布局"状态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！