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

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

1 个答案: