AngularJs - ui-router嵌套视图不起作用

Question

我无法显示嵌套视图

1.基础应用

"name": "app",
"abstract": true,
"url": "",
"views": {
  "root": {
    "templateUrl": "layout.html",
    "controller": "",
    "controllerAs" : ""
  },
  "header@app": {"templateUrl": ""},
  "nav@app": {"templateUrl": ""},

显示索引页：

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

显示布局页面：

<div ui-view="header"></div>
<div ui-view="nav"></div> 
<div ui-view="content"></div>

2。内容状态示例

"name": "app.content",
"url": "/content",
"views": {
  "content@app": {
    "templateUrl": "sample1.html",
    "controller": "",
    "controllerAs" : ""
  }
}

3。另一个内容状态示例

"name": "app.content.inbox",
"url": "/inbox",
"views": {
  "content@app": {
    "templateUrl": "sample2.html",
    "controller": "",
    "controllerAs": ""
  }
}

到目前为止一切正常

Sample2.html 有一个嵌套视图，该页面的 html 如下所示：

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

状态是这样的：

"name": "app.content.inbox.folder",
"url": "/inbox/:folder",
"views": {
  "folder@app.content": {
    "templateUrl": "folder.html",
    "controller": "",
    "controllerAs": ""
  }
}

我没有得到 folder.html 嵌套视图。谁能看到我的错误？

Answer 1

状态应该是这样的（我注释了原来不正确的部分，修改在下面）：

"name": "app.content.inbox.folder",
//"url": "/inbox/:folder",
"url": "/:folder",
"views": {
  //"folder@app.content": {
  "folder@app.content.inbox": {
    "templateUrl": "folder.html",
    "controller": "",
    "controllerAs": ""
  }
}

事实上，如果视图的目标是其父视图的命名视图，即使这样也可以工作

"views": {
  //"folder@app.content": {
  // "folder@app.content.inbox": { // correct but redundant
  "folder": {                    // that is enough, parent will be searched by default