我有一个集合页面,左侧有导航,右侧有一堆记录。每个导航项对应一条记录。我希望用户能够单击左侧的导航项,然后滚动到记录。另外,导航项和记录应具有“选定”状态。
URL/stuff/4?selectedRecord=5 应该可以获取集合 id 4 的所有记录并选择记录编号 5。
我在我的导航/记录项目和下面的状态提供程序上使用了 ui-sref 来实现这一点。当我单击导航项时,网址和状态会发生变化。
但是当我将网址从/stuff/4?selectedRecord=5 更改为/stuff/4?selectedRecord=6 时,没有任何反应。没有触发 $stateChangeStart...
$stateProvider
// The stuff index: /stuff
.state('stuff', {
url: '/stuff',
abstract : true,
templateUrl: 'app/stuff/stuff.html' // wrapper
})
// Stuff detail page.
.state('stuff.detail', {
url: '/{stuffId}',
templateUrl: 'app/stuff/stuff.detail.html',
controller: 'StuffDetailController'
})
// Stuff detail page with a record selected
.state('stuff.detail.selectedRecord', {
url: '?selectedRecord'
})
这是我的 sref 导航项,有效:
<li ui-sref="stuff.detail.selectedRecord({selectedRecord:record.id})"
ui-sref-active="selected">Works</li>
编辑:如果我将 selectedRecord 的 url 更改为:
,则完全相同的代码将起作用:url: '/select/:selectedRecord'
最佳答案
这里的问题是,开头用问号定义的 url (url: '?selectedRecord'
) 是正则表达式最弱的选择......所以,如果您可以提供网址,例如像这样:
- /stuff/4/?selectedRecord=5 // see the '/' before '?'
- /stuff/4/?selectedRecord=6
一切都会起作用。事实上,可能有任何东西,只是为了帮助区分之前的 url 部分( url: '/{stuffId}'
) 已经被评估。
在此plunker ,此更新的 url 定义:
.state('stuff.detail.selectedRecord', {
url: '/?selectedRecord', // the ? is preceeding with /
...
})
实际上可能有任何其他字符或组合...只是为了帮助找到子状态 url 的开始位置。 (可以围绕 here 进行操作)
关于javascript - Angular UI Router 在 url 更改时无法获取查询参数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24786575/