Angular ui-router:重新加载时访问$ stateParams

时间:2015-10-11 11:48:31

标签: javascript angularjs angular-ui-router parameter-passing state

在我的Angular应用程序中,我有这种路径结构:

.state('mapping', {
    url: '/mapping',
    templateUrl: 'app/components/mapping/mapping.html',
    controller: 'MapCtrl as map',
    abstract: true,
    authenticate: true
})
.state('mapping.all', {
    url: '',
    templateUrl: 'app/components/mapping/partials/all.html',
    authenticate: true
})
.state('mapping.project', {
    url: '/:projectName',
    controller: 'ProjectCtrl as proj',
    templateUrl: 'app/components/mapping/partials/project.html',
    authenticate: true
})

预期的功能是,当用户访问'mapping.project'时,应用程序将使用projectID变量加载与该项目相关的所有相关信息,该变量通过$stateParams使用{{无形地}传递{1}}:

ui-sref

然而,这会导致不必要的行为:当用户在已经处于ui-sref="mapping.project({projectId: project.id, projectName: project.name})" 状态时重新加载页面时,不会加载任何内容,因为没有'mapping.project'被有效传递。

重新加载$stateParams的最佳方法是什么(确保我的控制器再次启动),而不在网址上显示?

1 个答案:

答案 0 :(得分:1)

在这种情况下,如果我们希望我们的参数在页面重新加载(或在新的选项卡/窗口中打开)中存活,那么它们只需必须成为URL的一部分。因此,执行此操作的方法是使用projectId扩展URL定义:

.state('mapping.project', {
    url: '/:projectName?projectId',
    ...
})

projectId添加为“查询字符串参数”。另一种选择是 params 嵌套

.state('mapping.project', {
    url: '/:projectName/:projectId',
    ...
})

另请检查:How to pass parameters using ui-sref in ui-router to controller