angularjs - 用户界面路由器 : intermediate templates-6ren

angularjs - 用户界面路由器 : intermediate templates

转载作者：行者123 更新时间：2023-12-02 22:27:42

25

4

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 构建一个网站，并且我们所有的内容页面共享相同的“容器”，因为我们总是想要相同的响应行为。

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

  <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 中如何实现这一点？我们已经做了一些嵌套 View ，但我不知道如何做通用模板，因此代码可能类似于:

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

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

在 nested states and nested views documentation我看到的大部分都是嵌套状态的东西，但我们想要的实际上只是一个简单的 html 模板，所以也许我们把这个变得过于复杂了，并且可以使用更简单的方法(我很确定情况就是如此)。我还检查过this issue ，其中一个答案说 ui-router 应该是解决方案，但仅此而已。

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

最佳答案

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

抽象状态:

  .state('master', {
      abstract:  true,
      views: {
        generic_template: {
          templateUrl: 'genericTemplate.html'
        }
      }
    })

然后，您必须将此抽象状态设置为 subview 的父 View 。因此， subview 将继承通用模板 View 。示例:

.state('one', {
    url: '/one',
    templateUrl: 'one.html',
    parent: 'master'
})

在你的index.html中，你必须使用通用模板的命名 View ，并在其中使用另一个未命名的 View 。像这样的事情:

<body>

  <div ui-view="generic_template">
    <div ui-view></div>
  </div>

</body>

这是一个plunker带有完整的工作示例。希望对您有所帮助。

关于angularjs - 用户界面路由器 : intermediate templates，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32527654/

25

4

0

文章推荐： oracle - 在 Oracle SQL 中查找层次关系中每个项目的顶级

文章推荐： elasticsearch - Elasticsearch:如何计算docFreq

首页

博学

6Ren·AI

商城

angularjs - 用户界面路由器 : intermediate templates