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



我正在构建一个小的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>

我已经削减了我的应用程序,并把它变成了一个普朗克,所以这个问题是有希望被其他人重现。这个问题也可以在这个视频中观察到: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或做了其他不正确的事情来导致这种行为?

查看此处更新版本

在你的状态'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 (见上面的第一行)…点击这里查看

最新更新