如何在AngularJS中使用ui-router正确配置此视图？

Question

我尝试修改使用 ui-router 的现有 AngularJS 应用程序。路由表非常大，即使我可以使它工作，我也不明白为什么。

使用＆＃34;基于对象＆＃34;配置状态。状态，他们看起来像：

parent = {
    abstract: true,
    name: 'parent',
    views: {
        'key': {
            templateUrl: '/app/views/parent.html'
        }
    }
},
child = {
    name: 'parent.child',
    views: {
        'other-key': {
            templateUrl: '/app/views/child.html'
        }
    }
},

点语法用于推断层次结构。关于视图，parent.html包含一些html和对child.html的引用，如：

<div data-ui-view="other-key"></div>

而且，它有效！据我所知，当激活子进程时，父进程和抽象状态（无法激活）用于继承数据。这让我觉得我应该能够把这两个视图放在同一个状态，它们应该可以工作。

但是，我有两种情况：

• 如果我将它们移动到父状态，则只渲染父视图，并且ui-router似乎无法加载子视图。

• 如果我将它们移动到子状态，则不会呈现任何内容。

似乎有理由认为如果它们一起在同一个州的视图集合中，一切都应该以完全相同的方式工作：

child = {
    name: 'parent.child',
    views: {
        'key': {
            templateUrl: '/app/views/parent.html'
        }
        'other-key': {
            templateUrl: '/app/views/child.html'
        }
    }
},

当状态被激活时，所有信息都可用于计算状态，但不知何故它不起作用。

希望我能包含所有信息。路由表太大，无法粘贴在这里。

Answer 1

这两种情况的问题略有不同，因此我将单独处理它们。

将所有内容移至父状态

在这种情况下，您无法呈现子模板，因为它位于父视图中。因此，当ui-router解析你的状态时，它只能找到一个命名视图（父视图），因此它是唯一一个将被渲染的视图。

将所有内容移至子状态

这里的问题与第一种情况几乎相同，但是现在没有任何东西被渲染，因为子状态不能找到父状态。您可以通过absolutely referencing父级的命名视图来修复此问题：

'key@parent': '/app/views/parent.html'

我不完全确定，但我猜这仍然不足以渲染两个视图（我相信只会渲染父级，因此你最终会完全一样好像你会把两个都移到父母那样的情况。）

解决方案

非常简单，将两个命名视图放在同一级别上，它将工作或将它们保持在不同的状态，以允许子状态从父模板中解析其命名视图。