除非在微不足道的情况下，否则无法让 ui-router 的片段排列起来

Question

我希望能够将 ui-路由命令附加到任何模块的配置函数，并获得一个统一的状态层次结构，该层次结构按状态命名组织：根、root.sub、sub.detail，等等。但我似乎只能在附加到主应用程序模块的配置中定义路由，而不能在任何子模块中定义路由，并且...

虽然我已经尝试了很多（全部？）变体，但我对以下内容的预期效果并不满意，假设我的索引包括：<div ui-view="shell"></div>.

var app = angular.module('shell.module', ['sub.module'])
app.config(function($stateProvider) {
        $stateProvider
        .state('shell', {
            views: {
               url: '/',
               template: '<div ui-view="area"></div>'
            }
        })

var sub = angular.module('sub.module',[]);
sub.config(function($stateProvider) {
        $stateProvider
        .state('shell.sub', {
            views: {
                url: '/sub',
                template: 'satisfying content!'
            }
        })
    });

似乎是真的，如果未命名子状态，则子状态模板将替换索引中的根状态内容。但如果两者都被命名，则根状态包含：

    <div ui-view="shell" class="ng-scope>
       <div ui-view="sub" class="ng-scope"></div>
    </div>

我相信这意味着第一次替换成功，第二次（内部）替换有效，但第二次替换不被解释为 angular 语法，只是文本（或 html）。

对我来说，综合经验意味着 ui-router 的规则没有定义，除了最微不足道的情况，因为我似乎已经读过 'everything' 了，虽然没有写的真好。

Answer 1

您的状态定义不正确。

视图对象应包含视图名称作为键和 controller/template 等作为值。

此外，默认情况下，子状态会将其内容粘贴到其父状态的未命名视图中。您没有任何未命名的视图，因此您必须为视图对象提供不同的语法。

我认为您的代码应该如下所示：

app.config(function($stateProvider) {
    $stateProvider
    .state('shell', {
        url: '/',
        views: {
           '' {
               template: '<div ui-view="area"></div>'
           }
        }
    })

var sub = angular.module('sub.module',[]);
sub.config(function($stateProvider) {
    $stateProvider
    .state('shell.sub', {
        url: 'sub/',
        views: {
            'area@shell': {
                template: 'satisfying content!'
            }
        }
    })
});

此外，您的 url 位置错误且创建不正确。子视图 url 是通过将其父视图的 url 添加到它们之前创建的。所以在你的情况下 "shell.sub" url 本来是 //sub 这是错误的。我修好了。

我认为您还有更多文档（重新）阅读要做:)

除非在微不足道的情况下，否则无法让 ui-router 的片段排列起来

cannot get the pieces of ui-router to line up except in trivial cases

angularjs

angular-ui-router