Question

我已经能够使用ui-router切换出我的角度路由器代码，它可以在基本设置下正常工作。但是在我的页面上，我有一部分内容，我想在多个视图中重用，但我无法正常工作。任何人都可以在下面看到我的代码的问题。

...路由

$stateProvider
.state( 'jobs', {
    url: '/jobs',
    templateUrl: templates.jobs,
    views: {
        'jobs': {
            templateUrl: templates.jobList,
            controller: 'JobListController'
        },
        'alert': {
            templateUrl: templates.alert,
            controller: 'AlertController'
        }
    }
})

templates.jobs文件......

<div ui-view="jobs"></div>
<div ui-view="alert"></div>

然后templates.jobList和templates.alert只是常规的html块。

我有一个主页面，其中只包含我的应用最初加载的位置。在这个ui视图中，我想加载templates.jobs视图及其嵌套视图。

我发现如果我从作业状态中删除templateUrl：templates.jobs，然后将两个ui-views从该作业文件移动到我的主html文件就可以了。但是，我的主文件需要能够加载许多潜在的视图 - 主html上的ui-view只是应用程序其余部分所在的占位符。所以我在主文件中不能拥有这两个ui-views。有没有办法让这项工作？感谢。

Answer 1

还在views对象中设置jobs状态的父视图，并使用绝对定位：

$stateProvider.state('jobs', {
    url: '/jobs',
    views: {
        '@': {
            template: '<div ui-view="jobs"></div><div ui-view="alert"></div>',
            controller: function () {}
        },
        'jobs@jobs': {
            template: '<h2>Joblist</h2>',
            controller: function () {}
        },
        'alert@jobs': {
            template: '<h2>alert</h2>',
            controller: function () {}
        }
    }
});

关于Plunker的工作示例：http://plnkr.co/edit/AR8RK1Ik1xeGL0xUBV6e?p=preview

参考：https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#view-names---relative-vs-absolute-names

无法获得嵌套视图以使用ui-router

1 个答案: