Question

我一直在寻找，并且发现没有任何可行的东西，或者任何有效的东西。

我正在为我正在构建的应用程序建立状态，如下所示：

app - 主要母国

facebook - Facebook所有路线的父状态

adwords - Adwords所有路线的父状态

bing - Bing所有路线的父状态

... - 还有很多......很多......

因此，例如，如果我想要一个Facebook概述，它将是app.facebook.overview。但是，它没有以我尝试过的任何方式工作（dot注释，parent在声明中等。）

$stateProvider
    .state('app', {
        url: '',
        abstract: true,
        templateUrl: 'assets/views/default.html'
    })
    .state('app.facebook', {
        url: '/facebook',
        abstract: true
    })
    .state('app.facebook.overview', {
        url: '/overview',
        templateUrl: '/assets/views/facebook/overview/overview.html',
        controller: 'FacebookOverviewCtrl'
    });

我尝试了abstract和parent的每个组合以及dot注释。我无法让它发挥作用。它没有给我以下错误：

Could not resolve 'app.facebook.overview' from state 'app'

我在这里做错了什么？我不明白，我已经关注它的文档，并在Stackoverflow上查看了很多问题。有什么想法吗？

编辑：

我已经找到了问题所在。基本错误。我没有在主angular.module声明中包含该模块。嗯......早上4点为你编码。

Answer 1

我的答案基于here 基本上，您只需要将/facebook的网址设置为url: ':facebook'，这应该可以解决问题。 http://plnkr.co/edit/LQLYTu0YHlvTdB26vQcP

Answer 2

我想说明一点，我是愚蠢的。

这是一个有效的插件： https://plnkr.co/edit/aAeoucDidw3NX7QJqise?p=preview

如果我包含该模块，它会对我的代码有帮助。

var App = angular.module('app', [
    '... other modules ...',
    'ui.router',
    '... other modules ...',
]);

修正：

var App = angular.module('app', [
    '... other modules ...',
    'ui.router',
    'app.facebook',
    '... other modules ...',
]);

基本错误，但值得保留，因为我花了很长时间才弄清楚如何使用ui-router进行深度嵌套状态。我学到的一些东西：

你不需要在抽象状态上有一个URL，但如果你这样做，它会在前面加上
- 例如：app没有网址，app.facebook的网址为'/facebook'，app.facebook.overview的网址为'/overview'。这意味着将使用的网址将最终成为/facebook/overview
您可以根据需要嵌套状态。
如果进一步向下，则需要在状态声明中包含template: '<ui-view></ui-view>'，以便根据需要继续输入下一个状态。
- 例如：app有一个模板页面，其中包含<ui-view></ui-view>，但app.facebook也必须声明template: '<ui-view></ui-view>'，因此它会在下面插入您想要的页面它（app.facebook.overview）。

我希望这能帮助更多的人而不仅仅是我。花了一段时间才弄明白，但是plunk的代码工作正常。现在，这个问题已经解决了。我觉得我终于可以继续......

Ui-Router深层嵌套状态与父母

2 个答案: