angularjs - 在 Angular UI Router 中嵌套路由

Question

(AngularJS v1.2.0-rc.3 + Angular UI-Router v0.2.0)

在我的 index.html ，我有以下代码:

<div class="container" ui-view></div>

在我的 app.js 中，我有以下代码:

    $stateProvider
    .state('projects', {
        abstract: true,
        url: '/projects',
        template: '<ui-view />',
    })
    // below display properly
    .state('projects.list', {
        url: '',
        templateUrl: 'views/project_list.html',
        controller: 'ProjectListCtrl'
    })
    // below display properly
    .state('projects.one', {
        url: '/{projectId:[0-9]{1,8}}',
        templateUrl: 'views/project_dashboard.html',
        controller: 'ProjectCtrl'
    })
    // below does not display at all
    .state('projects.one.campaigns', {
        url: '/campaigns',
        template: 'I cannot seem to display this text'
    })

我可以很好地点击以下路线: index.html/projects , index.html/projects/1 ，但我无法到达这条路线: index.html/projects/1/campaigns
有谁知道为什么我不能？

如果您能回答我如何显示 projects.one.campaigns，则加分。状态在与 projects.one 相同的 URL 页面上状态。

Answer 1

原因是因为projects.one匹配之前 projects.one.campaigns
添加 projects.one抽象状态，然后添加一个 projects.one.default使用 templateUrl 声明状态。

.state('projects.one', {
    url: '/{projectId:[0-9]{1,8}}',
    abstract:true,
    template: '<ui-view/>',
})
.state('projects.one.default', {
    url: '',
    templateUrl: 'views/project_dashboard.html',
    controller: 'ProjectCtrl'
})
.state('projects.one.campaigns', {
    url: '/campaigns',
    template: 'I cannot seem to display this text'
}

要在 project.one 的同一页面上显示事件模板，您不应该使用状态而是使用指令，并在同一页面上使用 ng-show 切换。