Angular UI Router - 是否有可能拥有多级嵌套命名视图？答案

【问题标题】：Angular UI Router - Is it possible to have multilevel Nested Named Views?Angular UI Router - 是否有可能拥有多级嵌套命名视图？
【发布时间】：2014-05-12 12:06:06
【问题描述】：

我正在尝试创建一个嵌套命名视图的 SPA 角度应用程序。但未能成功创建此设置。有人可以帮我指出我的错误吗？

在索引页面上，我有 2 个命名视图，我可以看到这两个页面 - viewA 和 viewB。

<!-index.html--->
<table>
    <tr>
        <td>
            <div ui-view="viewA"></div>
        </td>
        <td>
            <div ui-view="viewB"></div>
        </td>
    </tr>
</table>

在 ViewA 上，我不确定如何加载另外 2 个命名视图 - view1、view2。我被困在这里。

<!-viewA.html--->
<div>
<h3>This is view A</h3>
<table>
    <tr>
        <td>
            <div ui-view="view1"></div>
        </td>
        <td>
            <div ui-view="view2"></div>
        </td>
    </tr>
</table>
</div>

我得到了这样的配置：

angular.module('myApp', ['ui.router']).config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
    .state('index', {
        url: "",
        views: {
            "viewA": {
                templateUrl: "partials/views/viewA.html"
            },
            "viewB": {
                templateUrl: "partials/views/viewB.html"
            }
        }
    }).state('index.viewA', {
        views: {
            "view1": {
                templateUrl: "partials/views/view1.html"
            },
            "view2": {
                templateUrl: "partials/views/view2.html"
            }
        }
    });

});

【问题讨论】：

看来不可能，

标签： angular-ui-router

【解决方案1】：

您可以使用绝对命名来定位命名视图，如下所示：

 $stateProvider
    .state('index', {
        url: '/index',
        views: {
            'viewA': { template:"<h1>This is view A<h1><a ui-sref='index.view1'>link to view 1</a> <div ui-view='view1'></div>" },
        }
    })
    .state('index.view1', {
        url: '/index/view1',
        views: {
            'view1@index': { template : '<H3>This is view 1</H3>'}

        }
    }

这里有个笨蛋：http://plnkr.co/edit/TupJbvrMLxdjhU0Wjc1p?p=preview

这本质上是问题的重复： AngularJS UI router: How to configure nested named views?

【讨论】：