3

最终编辑：使用嵌入指令工作 plunker。

编辑：我用第一个答案中给出的解决方案做了第一个 plunker。它有效，但这不是所需的行为，因为模板包含所有部分。

我做了第二个plunker（但显然它不起作用）。我想这主要是因为模板不是partial的父级，而是包含在其中，所以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>

理想情况下，我们希望只定义一次通用模板视图，并在我们的所有模块中使用它。

在嵌套状态和嵌套视图文档中，我看到的大多是嵌套状态的东西，但我们真正想要的只是一个普通的 html 模板，所以也许我们过于复杂了，并且可能有一种更简单的方法（我很确定它是案子）。我也检查了这个问题，其中一个答案说 ui-router 应该是解决方案，但仅此而已。

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

4

2 回答 2

3

它可以结合命名视图和抽象状态来实现。这里的“关键”是定义一个带有布局视图的抽象状态（或通用模板，如果我们遵循您原始帖子的命名法）。

抽象状态：

  .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 。希望能帮助到你。

于 2016-02-08T16:00:08.800 回答
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>

编辑：工作的笨蛋

于 2016-02-08T18:13:09.693 回答