Question

我一直在环顾四周，也许我错过了一些东西，但我完全无法弄清楚如何让它发挥作用。基本上，我想要一个具有三个平行视图的状态。让我们称它们为页眉，正文和页脚。页眉和页脚在简单的并行视图下工作得很好，但我无法弄清楚如何自动渲染body子状态，以便我可以使用它来管理其他视图。

app.js

  .state('main', {
    url: '/',
    views: {
      mainModule: { templateUrl: 'partials/main.html'},
      "header@main": { 
        templateUrl: "partials/header.html",
      },
      "footer@orders": { 
        templateUrl: "partials/footer.html",
      },
    }
  })      
  .state('main.body',{
    url:'/',
    template:"<p>Test!</p>"
  })

main.html中

<div ui-view="header"></div>
<div ui-view></div>
<div ui-view="footer"></div>

我有一种感觉，HTML的ui-view部分不是要走的路，答案可能与抽象状态有关，但到目前为止我还没有设法让它工作。任何帮助将不胜感激。

我还尝试引用一个视图，好像它是一个状态，但也没有呈现任何内容。

This答案似乎已接近尾声，但我无法得到评论中的建议。

我已经查看过与布局相关的其他问题，但我遇到的解决方案都没有对我有用。谢谢！

Answer 1

有a working plunker，显示下面所述的所有小调整。

首先，我们必须确保，我们的index.html（根视图）可以放置我们的'mainModule'视图模板。所以这是 index.html ：

的片段

<body>
    <div ui-view="mainModule" ></div>
    ...

这意味着我们的核心视图（在'main'状态中定义的视图之一）将被正确地注入到根视图中。

现在，我们的页眉和页脚都应该使用绝对名称，但它们的后缀必须是'main' （而不是上面的'order'，如页脚所示）。这就是说UI-Router：将它们放在这个状态（main.html）中定义的视图中

此外，我们可以（作为此'main'州的一部分）定义“body”的一些默认内容。可以让我们说一些列表视图......

.state('main', {
    url: '/',
    views: {
      // it could be "mainModule" as well... so it needs its: ui-view="mainModule"
      mainModule: { templateUrl: 'tpl.main.html'},
      "header@main": { 
        ...
      },
      // wrong absolute name
      // "footer@orders": { 
      // we need the 'main' as well
      "footer@main": { 
        ...
      },
      // even the body, unnamed view could have some default
      "@main": { 
        templateUrl: "tpl.list.html", // e.g. list
      },
    }

接下来，我们可以将更多的状态定义为“主要”的子项。他们将（默认情况下）使用 main 的未命名视图。还有更多 - 替换上面使用的列表视图：

  .state('main.body',{
    url:'/body',
    ...
  }) 
  .state('main.detail',{
    url:'/detail:/id',
    ...
  })

观察它here，它应该给出所有答案......

Answer 2

ui-view指令中使用的视图名称应与路由配置部分中定义的视图名称匹配：

<div ui-view="mainModule"></div>
<div ui-view="header@main"></div>
<div ui-view="footer@orders"></div>

我不完全确定＆＃34; @＆＃34;符号会给你带来麻烦 - 如果有，请尝试从视图名称中删除它。

与儿童状态的角度ui路由器平行视图

2 个答案: