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状态，那么

点数。

Answer 1

原因是因为projects.one匹配projects.one.campaigns

之前

添加projects.one抽象状态，然后使用templateUrl添加projects.one.default状态。

.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'
}

要在项目的同一页面上显示广告系列的模板，您不应该使用状态而是使用指令，并在同一页面上使用ng-show进行切换。

Answer 2

我只花了一整天来处理这个问题。

我发现，你根本不需要抽象状态！

试试这个：的index.html：

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

使用指令ui-view作为顶级模板中的标记。

现在所有嵌套模板都像这样包装：

<ui-view>
    <div>
        template code
    </div>
</ui-view>

现在你可以：

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

我需要嵌套的一般解决方案，这是有效的。现在，您可以轻松创建非常深的嵌套（例如 one.campaing.group.member.note ）。如果您将在顶层使用ui-view并使用ui-view包装所有模板，则每个模板的联系人将替换顶级ui-view的内容（为空）。

在Angular UI路由器中嵌套路由

2 个答案: