ui-router：中间模板
Posted
技术标签:
【中文标题】ui-router：中间模板【英文标题】：ui-router: intermediate templates 【发布时间】：2015-12-08 06:17:23 【问题描述】：最终编辑：working plunker 带有转入指令。
编辑：我使用第一个答案中给出的解决方案创建了 a first plunker。它有效，但不是所需的行为，因为模板包含所有部分。
我用我希望实现的目标创建了second plunker（但显然它不起作用）。我认为这主要是因为模板不是部分的父，而是包含在其中，所以ui-router不太了解我想要什么。
对此的任何帮助将不胜感激！
我们正在使用 Angular Material 和 ui-router 构建一个网站，我们所有的内容页面都共享同一个“容器”，因为我们总是想要相同的响应行为。
这个通用容器的代码类似于：
<div class="layout-content">
<div layout="column" layout-align="center">
<div layout="row" layout-align="center center">
<section class="layout-fixed-width md-whiteframe-z1" flex-sm="100" flex-gt-sm="90">
content placed here
</section>
</div>
</div>
</div>
所有页面的标题可以不同，所以我们的结构基本上是：
问题是，如何在ui-router中实现呢？我们已经做了一些嵌套视图，但我不知道如何做一个通用模板，所以代码可能是这样的：
<form>
<md-toolbar/>
<div ui-view="generic-template">
<div ui-view="my-content"></div>
</div>
</form>
理想情况下，我们希望只定义一次通用模板视图，并在我们的所有模块中使用它。
在nested states and nested views documentation 中，我看到的大多是嵌套状态的东西，但我们真正想要的只是一个普通的 html 模板，所以也许我们过于复杂了，并且可能有一种更简单的方法（我很确定它是案子）。我还检查了this issue，其中一个答案说 ui-router 应该是解决方案，但仅此而已。
也许我们应该做一个指令？
【问题讨论】：
【参考方案1】：可以结合命名视图和抽象状态来实现。 这里的“关键”是定义一个带有布局视图的抽象状态（或通用模板，如果我们遵循您原始帖子的命名法）。
抽象状态：
.state('master',
abstract: true,
views:
generic_template:
templateUrl: 'genericTemplate.html'
)
然后，您必须将此抽象状态设置为子视图的父级。因此，子视图将继承通用模板视图。示例：
.state('one',
url: '/one',
templateUrl: 'one.html',
parent: 'master'
)
在您的 index.html 中，您必须为通用模板使用命名视图，并在其中使用另一个未命名视图。像这样的：
<body>
<div ui-view="generic_template">
<div ui-view></div>
</div>
</body>
这里有一个plunker 和一个完整的工作示例。 希望对您有所帮助。
【讨论】：
我编辑了我的问题，不幸的是它没有 100% 涵盖我的要求。不过谢谢！【参考方案2】：也许我们应该做一个指令？
带有嵌入的ui-view 的指令似乎可以满足您的需求。这可以避免您将路由逻辑与路由无关的东西弄得一团糟。
genericTemplate.html:
<div>
<p>Generic content</p>
<ng-transclude></ng-transclude>
</div>
在你的 js 中的某个地方：
angular.module('formApp')
.directive('genericTemplate', function ()
return
replace: true,
transclude: true,
templateUrl: 'genericTemplate.html'
;
);
在您的 html 中：
<body ng-app='formApp'>
<div generic-template>
<div ui-view></div>
</div>
</body>
编辑：工作plunker
【讨论】：
谢谢！这似乎是它！我添加了一个工作 plunker 证明它有效。我们会尽快在我们的项目中实现它并通知您。 这绝对是最好的选择。我也试图用一个嵌入指令来实现它，但没有成功。非常感谢！以上是关于ui-router：中间模板的主要内容，如果未能解决你的问题，请参考以下文章