angularjs – Angular UI-Router如何创建一个“布局”状态？

发布时间：2020-12-17 10:27:25 所属栏目：安全来源：网络整理

导读：给定一个HTML文件如下： htmlheader ui-view="header"/headerdiv class="main" ui-view/divfooter ui-view="footer"/footer/html 如何创建一个布局状态，用头模板填充“头”，使用页脚模板填充页脚，然后允许子状态填充空的ui视图？我认为空的ui视图也可以

给定一个HTML文件如下：

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

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

我认为空的ui视图也可以命名为像ui-view =“main”。

一种方式是创建一个全局“根”状态。所以，每一个国家都会是孩子。
像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>

Btw。我在header.tpl.html中使用单独的控制器，这是主AppCtrl的子代：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!