5

（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状态相同的 URL 页面上显示状态，则可以加分projects.one。

4

2 回答 2

8

原因是因为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'
}

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

于 2013-11-01T19:27:45.760 回答
1

我只是花了一整天的时间来处理这个问题。

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

试试这个：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 的内容（为空）。

于 2014-05-23T11:12:18.007 回答