Question

WikiApp.config(function config($stateProvider, $urlRouterProvider) {
    $stateProvider
    .state('revision', {
        url: '/wiki',
        views: {
            "main": {
                controller: 'ListCtrl',
                templateUrl: 'wiki/wiki.tpl.html'
            },
            "sidebar-left": {
                templateUrl: 'wiki/wiki.sidebar-left.tpl.html'
            }
        },
        data:{ pageTitle: 'List articles' }
    })

这是我的Angular位的样子，这就是我在模板（wiki.tpl.html）中执行它的方式：

<div ui-view="sidebar-left"></div>

现在main视图工作正常，但是当我尝试集成侧边栏时，它没有加载，我做错了什么以及如何在这样的单个页面中使用多个模板？

谢谢！

Answer 1

WikiApp.config(function config($stateProvider, $urlRouterProvider) {
    $stateProvider
    .state('revision', {
        url: '/wiki',
        views: {
            main: {
                controller: 'ListCtrl',
                templateUrl: 'wiki/wiki.tpl.html'
            },
            sidebarLeft: {
                templateUrl: 'wiki/wiki.sidebar-left.tpl.html'
            }
        },
        data:{ pageTitle: 'List articles' }
    })

Answer 2

如果要使用嵌套模板，则应使用子视图实现该模板。在您当前的示例中，您将两个模板都设置为兄弟模板。

我建议你创建2个州。主模板'main'的抽象视图和另一个视图'main.wiki'。应将路由分配给'main.wiki'状态，它将从主视图继承参数（包括模板设置）。

希望很清楚。

AngularJS stateprovider视图模板

2 个答案: