Question

我遇到了设置嵌套视图状态的问题。

这是我的测试模板的相关部分，它被加载到我的index.html上的'main'ui-view中。

<div class="row-fluid">
<div class="col-lg-3">
    <ul class="nav nav-list">
        <li class="nav-header">Header 1</li>
        <li class="active"><a href="#/test/page1">Page 1</a></li>
        <li><a href="#/test/page2">Page 2</a></li>
        <li class="nav-header">Header 2</li>
        <li><a href="#/test/page3">Page 3</a></li>
    </ul>
</div>
<div class="col-lg-9">
    <div class="container" ui-view="testcontent"></div>
</div>

这是我的测试模块的js。

angular.module( 'test', [
    'ui.state',
    'ui.bootstrap',
    'test.page1',
    'test.page2',
    'test.page3'
])

.config(function config( $stateProvider ) {
    $stateProvider.state( 'test', {
        url: '/test',
        templateUrl: 'test/test.tpl.html',
        views: {
            "main": {
                controller: 'TestCtrl',
                templateUrl: 'test/test.tpl.html'
            }
        },
        data:{ pageTitle: 'Test' }
    })
    .state( 'test.page1', {
        url: '/page1',
        views: {
            "testcontent@test": {
                controller: 'Test1Ctrl',
                templateUrl: 'test/page1/page1.tpl.html'
            }
        },
        data:{ pageTitle: 'Test Page 1' }
    })
    .state( 'test.page2', {
        url: '/page2',
        views: {
            "testcontent@test": {
                controller: 'Test2Ctrl',
                templateUrl: 'test/page2/page2.tpl.html'
            }
        },
        data:{ pageTitle: 'Test Page 2' }
    })
    //.state( 'test.page3', {
    //    url: '/page3',
    //    views: {
    //        "testcontent@test": {
    //            controller: 'Test3Ctrl',
    //            templateUrl: 'test/page3/page3.tpl.html'
    //        }
    //    },
    //    data:{ pageTitle: 'Test Page 3' }
    //})
    ;
}) // Module configuration

.controller( 'TestCtrl', function TestCtrl( $scope ) {

});

如果在父模块的配置中设置了状态配置，则此工作正常。

我想要做的是在模块的配置部分而不是在父级中设置状态。

angular.module( 'test.page3', [
    'ui.state',
    'ui.bootstrap',
    'test'
])

.config(function config( $stateProvider ) {
    $stateProvider.state( 'test.page3', {
        url: '/page3',
        views: {
            "testcontent@test": {
                controller: 'Test3Ctrl',
                templateUrl: 'test/page3/page3.tpl.html'
            }
        },
        data:{ pageTitle: 'Test Page 3' }
    });
}) // Module configuration

.controller( 'Test3Ctrl', function Test3Ctrl( $scope ) {

});

如果我尝试这个，那么我对AppCtrl toBeTruthy的通用测试就会出现错误“无法实例化模块test.page3，因为：没有这样的状态测试”。

有没有办法做到这一点，还是我在测试模块中一直将所有.state（）调用链接起来？

Answer 1

首先，您遇到了一个问题：循环模块依赖。 test取决于test.page3，这取决于test。

然后，使用父模块的父状态的模块应该依赖它。

具有以下模块声明：

angular.module( 'test', [
    'ui.state',
    'ui.bootstrap'
]);

和

angular.module( 'test.page3', [
    'test'
]);

您的$stateProvider配置将有效。

您最终应该能够为其他页面提供相同的依赖结构。

angular-ui-router嵌套状态为“没有这样的状态”为父

1 个答案: