ui-router：中间模板答案

【问题标题】：ui-router: intermediate templatesui-router：中间模板
【发布时间】：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 应该是解决方案，但仅此而已。

也许我们应该做一个指令？

【问题讨论】：

标签： angularjs templates angular-ui-router angular-material nested-views

【解决方案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 证明它有效。我们会尽快在我们的项目中实现它并通知您。
这绝对是最好的选择。我也试图用一个嵌入指令来实现它，但没有成功。非常感谢！