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

复制步骤：

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

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

滚动到底部，然后点击Next Phase链接。请注意，状态更改并且URL更新。
向下滚动此新视图，然后点击Previous Phase。请注意，先前的状态会重新加载，这次是正确更新的URL。

我是否错误地使用ui-router或者做错其他事情导致此行为？

Answer 1

检查here更新版本

在您的州'check-lists'上，您向'checklist-phase'

提供了ui-sref

<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 （请参阅上面的第一行） ...检查here

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

1 个答案: