ui-router: 中间模板

Question

Final Edit: working plunker with the transcluded directive.

Edit: I made a first plunker with the solution given in the first answer. It works, but it's not the desired behaviour, because the template contains all the partial.

I made a second plunker with what I hope to achieve (but it doesn't work, obviously). I think it's mostly because the template is not the parent of the partial, but it is contained in it, so ui-router doesn't understand very well what I want.

Any help with this would be greatly appreciated!

我们正在使用 Angular Material 和 ui-router 构建一个网站，并且我们所有的内容页面都共享相同的 "container"，因为我们总是想要相同的响应行为。

这个通用容器的代码类似于：

  <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>

header 可以在所有页面中有所不同，所以我们的结构基本上是：

问题是，ui-router如何做到这一点？我们已经完成了一些嵌套视图，但我不知道如何制作通用模板，因此代码可能类似于：

<form>
  <md-toolbar/>
  <div ui-view="generic-template">
      <div ui-view="my-content"></div>
  </div>
</form>

理想情况下，我们只想定义一次 generic-template 视图，并在我们所有的模块中使用它。

在 nested states and nested views documentation I see mostly nested state stuff, but what we want is really only a plain html template, so maybe we are over-complicating this, and an easier way is possible (I'm quite sure it's the case). I've also checked this issue 中，其中一个答案说 ui-router 应该是解决方案，但仅此而已。

也许我们应该改为执行指令？

Answer 1

可以结合命名视图和抽象状态来实现。这里的 'key' 是为布局定义一个带有视图的抽象状态（或者通用模板，如果我们按照你原来的命名法 post）。

抽象状态：

  .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 完整的工作示例。希望对你有帮助。

Answer 2

Maybe we should do a directive instead?

带有嵌入 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>

Edit: working plunker

ui-router: 中间模板

ui-router: intermediate templates

templates

angularjs

nested-views

angular-ui-router

angular-material