Angular UI-Router如何创建“布局”状态？

一尘不染

angularjs

给定这样的HTML文件：

<html>
<header ui-view="header"></header>
<div class="main" ui-view></div>
<footer ui-view="footer"></footer>
</html>

如何创建一个布局状态，以一个标题模板填充“标题”，用一个脚注模板填充页脚，然后允许子状态填充空的ui视图？

我想空的ui-view也可以命名为ui-view =“ main”。

阅读 168

2020-07-04

共1个答案

一尘不染

一种方法是建立全局“根”状态。因此，每个
州都是孩子。像root.pages，root.pages.edit，root.settings等。然后，您可以提供页眉和页脚的默认模板。

我个人使用的另一种不同方法是ng-include用于页眉和页脚。

<body ng-controller="AppCtrl">
  <div id="header" ng-include="'header.tpl.html'"></div>
  <div class="main_container" ui-view>
  </div>
</body>

顺便说一句。我在header.tpl.html中使用单独的控制器，这是主AppCtrl的子级：

<div id="header" ng-controller="HeaderCtrl"> ....

2020-07-04