Angular UI Router 不会在 url 更改时获取查询参数

Question

我有一个收藏页面，左侧是导航，右侧是一堆记录。每个导航项对应一个记录。我希望用户能够单击左侧的导航项，然后滚动到记录。此外，导航项和记录应该具有“已选择”状态。

URL /stuff/4?selectedRecord=5 应该让我获得集合 id 4 的所有记录并选择记录编号 5。

我在导航/记录项上使用 ui-sref 以及下面的状态提供程序进行了此操作。当我点击导航项时，网址和状态会发生变化。

但是当我将 url 从 /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'

Answer 1

这里的问题是，开头用问号定义的 url (url: '?selectedRecord') 是正则表达式的最弱选择......所以，如果你可以拥有例如 url像这样：

- /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）