angularjs - Angular：将第一个孩子插入父母（ui-view）

Question

我正在尝试将第一个子组件放入父组件中，例如test1.html应该在里面test.html。这是html代码：

测试.html：

<div ui-view></div>

测试1.html：

<h1>First</h1>
<button>Go to second page</button> // This should render test2.html inside test.html

测试2.html：

<h2>Second</h2>

test1.controller.js：

    .state('app.test', {
        url: '^/test',
        templateUrl: '/test/test.view.html',
        controller: 'TestController',
        controllerAs: 'testCtrl'
    })
    .state('app.test1', {
        url: '^/test1',
        templateUrl: '/test1/test1.view.html',
        controller: 'test1Controller',
        controllerAs: 'test1Ctrl'
    })
    .state('app.test2', {
        url: '^/test2',
        templateUrl: '/test2.view.html',
        controller: 'test2Controller',
        controllerAs: 'test1Ctrl'
    })

目前它只是加载test.html没有任何test1.html内部的主页。

Answer 1

尝试这个：

.state('app.test', {
            url: '^/test',
            templateUrl: '/test/test.view.html',
            controller: 'TestController',
            controllerAs: 'testCtrl'
        })
        .state('app.test.test1', {
            url: '/test1',
            templateUrl: '/test1/test1.view.html',
            controller: 'test1Controller',
            controllerAs: 'test1Ctrl'
        })
        .state('app.test.test2', {
            url: '/test2',
            templateUrl: '/test2.view.html',
            controller: 'test2Controller',
            controllerAs: 'test1Ctrl'
        })