Question

所以，毕竟我似乎没有得到ui-router。

这是一个破碎的例子： http://plnkr.co/edit/WgDqTzE3TJjrCZ2pxg5T?p=preview

实际的文件结构是：

app/
  app.js
  index.html
  main/
    main.html
    header/
      header.html
    footer/
      footer.html
    sections/
      content1/
        content1.html
      content2/
      ...

index.html有一个简单的<div ui-view></div>

main.html有：

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

header.html，footer.html，content1.html，...有实际内容。

app.js有：

$stateProvider
  .state("app", {
    url: "",
    abstarct: true,
    templateUrl: "main.html"
  })

  .state("app.main", {
    url: "",
    abstarct: true,
    views: {
      "header": {
        templateUrl: "header.html"
      },
      "footer":{
        templateUrl: "footer.html"
      }
    }
  })

  .state("app.main.content1", {
    url: "/",
    templateUrl: "content1.html"
  });

所以，我认为这意味着“/”会向我显示页眉，页脚，并自动在未命名的ui-view中插入内容。

没有。我做错了什么？

Answer 1

让它快速工作（不是按预期）我刚刚在页脚中添加了一个锚点，现在它是working

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

为什么呢？因为我们的状态def是这样的：

.state("app.main.content1", {
    url: "/",
    templateUrl: "content1.html"
  });

这意味着：

在我的父母中搜索未命名的视图

页脚视图是状态"app.main.content1"的父级，因此我们可以通过这种方式将其作为目标。

还有其他选择。

Here is最有可能的意图：，状态定义发生了变化：

.state("app.main.content1", {
  url: "/",
  views: {
    "@app": {
      templateUrl: "content1.html"
    }
  }

所以，现在我们通过绝对命名来定位app状态，它的视图锚<div ui-view="">。参见：

View Names - Relative vs. Absolute Names

在幕后，为每个视图分配一个遵循 viewname@statename 方案的绝对名称，其中viewname是视图指令中使用的名称，州名是州的绝对名称，例如contact.item。您还可以选择以绝对语法编写视图名称。

最后，即使是一个抽象的州和一个孩子，我们也可以达到相同的目的，检查here：

$stateProvider
 .state("app", {
  url: "",
  abstarct: true,
  views: {
    "" : {
      templateUrl: "main.html",
    },
    "header@app": {
      templateUrl: "header.html"
    },
    "footer@app":{
      templateUrl: "footer.html"
    }
  }
})  

.state("app.content1", {
  url: "/",
  templateUrl: "content1.html",
});

现在，所有UI-Router魔法都发生在根状态def中。我们首先定位root（index.html）unnmaed视图，以注入main.html。接下来 - 其他视图通过“header @ app”将目标状态（main.html）作为目标 - 绝对命名

这将是最合适的方式...... working example

如何正确使用嵌套路由来修复以下示例？

1 个答案: