成功更改状态后，UI 路由器无法更新地址栏中的 URL

Question

我正在构建一个小型 Angular 应用程序，目前正在使用 ui-router。

我遇到了一个问题，看起来非常像 ui-router 中的错误，但我不能确定，因为我对这个库不太熟悉。当用户单击特定链接时，尽管会按预期加载正确的视图状态，但地址栏中的 URL 不会更新。

我正在使用 ui-router ui-sref 指令自动生成状态的 URL。例如，在清单列表视图中我使用以下代码：

<a ui-sref="checklist-phase({ aircraftId: checklist.aircraft, checklistId: checklist.id, phaseSlug: checklist.phases[0].slug })" ng-bind="checklist.name"></a>

我已经削减了我的应用程序并将其制作成 Plunker，因此希望其他人可以重现该问题。在此视频中也可以观察到该问题： https://www.youtube.com/watch?v=EW9CFe6LfCw

复制步骤：

1. 去 http://run.plnkr.co/plunks/ZqMIYNU6abEAndAM5nx1/#/aircraft/1/checklists
2. 单击第一个链接。请注意，视图会更新以显示正确的状态，但 URL 仍保留在 /#/aircraft/1/checklists.

奇怪的是，通过其他方式导航回此状态可以完美更新 URL。例如（假设已遵循上述步骤 1 和 2）：

1. 滚动到底部并单击 Next Phase 关联。请注意，状态会发生变化并且 URL 会更新。
2. 向下滚动这个新视图并单击 Previous Phase. 。请注意，之前的状态会重新加载，这次 URL 会正确更新。

我是否错误地使用了 ui-router 或错误地执行了其他操作导致此行为？

Answer 1

查看 这里 更新后的版本

关于你的州 'check-lists' 您提供 ui-sref 到 'checklist-phase'

<a ui-sref="checklist-phase({ aircraftId: ...

还有 'checklist-phase' 被定义为子状态 'checklist-detail'

.state('checklist-phase', {
    parent: 'checklist-detail',

还有国家 'checklist-detail' 有调用 $state.go 的控制器

.state('checklist-detail', {       
    controller: 'ChecklistDetailCtrl',
    ...

    .controller('ChecklistDetailCtrl', function ($scope.... 
    {

        $state.go('checklist-phase', {
            phaseSlug: checklistData.phases[0].slug
        }, {
            location: 'replace'
        });

不要那样做...只需删除 $state.go - 因为您已经导航到 checklist-phase （参见上面的第一行） ...核实 这里