Question

我正在尝试使用命名视图的嵌套来创建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上，我不知道如何加载另外两个命名视图 - 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"
            }
        }
    });

}）;

Answer 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?

Angular UI路由器 - 是否可以拥有多级嵌套命名视图？

1 个答案: