angular UI-页面上的路由器嵌套视图

Question

我正在使用 UI-Router，我正在尝试在官方 GitHub's Page you can see a plunker example that what I'm trying to achieve: http://plnkr.co/edit/SDOcGS?p=preview

页面上嵌入两个视图

现在我根据自己的具体情况做了一些修改，基本上我把主页移到了另一个文件，所以我的模板是这样的（查看完整示例HERE）：

<body class="container">
    <ui-view></ui-view>
</div>

还有我的home.html

<div class="navbar">
   <div class="navbar-inner">
      <a class="brand" ui-sref="index">Quick Start</a>
      <ul class="nav">
          <li><a ui-sref="index">Home</a></li>
          <li><a ui-sref="route1">Route 1</a></li>
          <li><a ui-sref="route2">Route 2</a></li>
      </ul>
   </div>
</div>

<div class="row">
    <div class="span6">
        <div class="well" ui-view="viewA"></div>        
    </div>
    <div class="span6">
        <div class="well" ui-view="viewB"></div>        
    </div>
</div>

在我的示例中，嵌套视图（viewA 和 viewB）未嵌入。我一直在阅读文档，但我不明白为什么我的代码不起作用，我知道我假设有问题，有帮助吗？

Answer 1

有updated plunker

以防万一，我们想将一个模板用作一个状态内其他模板的目标...我们需要绝对命名

.state('index', {
    url: "",
    views: {
        "":{
            templateUrl: 'home.html',
        },
        "viewA@index": {
            template: "index.viewA"
        },
        "viewB@index": {
            template: "index.viewB"
        }
    }
})

现在，接下来的两个状态似乎正试图针对相同的命名视图...所以我们应该让它们成为 index[=20 的子状态=]

.state('index.route1', {
    url: "/route1",
    views: {
        "viewA": {
            template: "route1.viewA"
        },
        "viewB": {
            template: "route1.viewB"
        }
    }
})
.state('index.route2', {
    url: "/route2",
    views: {
        "viewA": {
            template: "route2.viewA"
        },
        "viewB": {
            template: "route2.viewB"
        }
    }
})

最后会要求uire this ui-sref:

<li><a ui-sref="index">Home</a></li>
<li><a ui-sref="index.route1">Route 1</a></li>
<li><a ui-sref="index.route2">Route 2</a></li>

检查一下here

文档：

View Names - Relative vs. Absolute Names

Behind the scenes, every view gets assigned an absolute name that follows a scheme of viewname@statename, where viewname is the name used in the view directive and state name is the state's absolute name, e.g. contact.item. You can also choose to write your view names in the absolute syntax.

For example, the previous example could also be written as:

.state('report',{
    views: {
      'filters@': { },
      'tabledata@': { },
      'graph@': { }
    }
})

angular UI-页面上的路由器嵌套视图

angular UI-Router nested views on a page

state

angularjs

angular-ui-router

View Names - Relative vs. Absolute Names