Question

我正在使用ui-route的嵌套视图，但是当我尝试访问嵌套模板时出现错误。我的州：

$stateProvider.state('invoice',{
            url: '/invoice',
            views: {
                '@': {
                templateUrl: 'views/invoice.v01/paths/invoice.pocketbits.html'
                },
                'list@invoice': {
                templateUrl: 'views/invoice.v01/paths/database.pocketbits.html'
                }
            }
        });

localhost /＃/ invoice 工作正常但是当我尝试点击＆＃34; ui-sref =＆＃34; list＆＃34;从里面我得到：

错误：无法解析＆＃39; list＆＃39;来自州＆＃39; invoice＆＃39;在 Object.transitionTo（angular-ui-router.js：3141）

虽然我的列表模板在发票内。

Answer 1

实际上，你给ui-sref的字符串应该引用一个州名。

我的意思是你实际上试图进入你未声明的状态list。

 $stateProvider.state('invoice',{
        url: '/invoice',
        views: {
            '@': {
            templateUrl: 'views/invoice.v01/paths/invoice.pocketbits.html'
            },
            'list@invoice': {
            templateUrl: 'views/invoice.v01/paths/database.pocketbits.html'
            }
        }
    });

此状态称为“发票”，有两个静态嵌套视图@和list@invoice

你实际上无法前往list州。

你可能想要这样的东西：

 $stateProvider.state('invoice',{
        url: '/invoice',
        templateUrl: 'views/invoice.v01/paths/invoice.pocketbits.html'
    });

 $stateProvider.state('invoice.list',{
        url: '/list',
        templateUrl: 'views/invoice.v01/paths/database.pocketbits.html'
    });

要清楚。在index.html中，您有一个ui-view。当您执行州发票时，您将使用发票状态中的模板替换此ui-view。您的发票状态模板里面会有ui-view。当您转到州invoice.list时，您会将invoice.list模板添加到此ui-view。

编辑：

根据您的评论，这是您正在查看的用例。

如果您想要两个单独的视图（例如：当您从invoice切换到list时，您将替换index.html ui-view的内容），您应该这样做：

$stateProvider.state('invoice',{
        url: '/invoice',
        templateUrl: 'views/invoice.v01/paths/invoice.pocketbits.html'
    });

 $stateProvider.state('list',{
        url: '/list',
        templateUrl: 'views/invoice.v01/paths/database.pocketbits.html'
    });

希望它有所帮助。如果您提供有关您尝试实现的内容的更多信息，我可以添加一个案例例，并使其适用于plunker。

嵌套的UI路由

1 个答案:

编辑：