Question

为什么这条路线不起作用？如何强制此代码工作？如何在angular-ui-router中实现布局？请帮助解决此问题。

$stateProvider
    .state( 'layout', {
        abstract: true,
        url: '',
        views: {
            'layout': { templateUrl: 'template/layout.html' },
            'header': {
                templateUrl: 'template/header.html',
                controller: 'HeaderController'
            },
            'sidebar': { templateUrl: 'template/sidebar.template.html' }
        }
    } )
    .state( 'layout.home', {
        url: '/',
        views: {
            'main@layout.home': { templateUrl: 'template/main.html' }
        }
    }
);

的layout.html

<main class="layout">
    <div ui-view="header"></div>
    <div class="main">
        <div class="container">
            <div class="row">
                <div class="col-md-9">
                    <div class="content">
                        <div ui-view="main"></div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div ui-view="sidebar"></div>
                </div>
            </div>
        </div>
    </div>
</main>

index.html

<div ui-view="layout"></div>

Answer 1

这应该有效

.state( 'layout', {
    abstract: true,
    url: '',
    views: {
        'layout': { templateUrl: 'template/layout.html' },
        'header': {
            templateUrl: 'template/header.html',
            controller: 'HeaderController'
        },
        //'sidebar': { templateUrl: 'template/sidebar.template.html' }
        'sidebar@layout': { templateUrl: 'template/sidebar.template.html' }
    }
} )
.state( 'layout.home', {
    url: '/',
    views: {
        //'main@layout.home': { templateUrl: 'template/main.html' }
        'main': { templateUrl: 'template/main.html' }
    }
}

父州'布局' - 现在定位'sidebar@layout' - 使用绝对命名，在'模板/内找到模板的layout.html'

子视图只是使用父目标'main'，因此我们不需要绝对命名。如果我们想要的话，那就是

'main@layout': { templateUrl: 'template/main.html' }

因为我们定位了父级的'布局'目标ui-view="main"

可以在这里找到工作示例（有更多细节）

Nested states or views for layout with leftbar in ui-router?

Answer 2

试试这个：

$stateProvider
    .state( 'layout', {
        abstract: true,
        url: '',
        views: {
            'layout': { 
                templateUrl: 'template/layout.html' 
            }
        }
    } )
    .state( 'layout.home', {
        url: '/',
        views: {
            'main': { 
                templateUrl: 'template/main.html' 
            },
            'header': {
                templateUrl: 'template/header.html',
                controller: 'HeaderController'
            },
            'sidebar': {
                templateUrl: 'template/sidebar.template.html' 
            }
        }
    }
);

Angular ui-router嵌套视图路由器不起作用

2 个答案: