Question

Szenario：

1）我们处于A状态 2）用户点击链接（目标是状态B）
3）$ stateChangeStart
4）状态B的依赖关系得到解决，一个抛出错误
5）$ stateChangeError
6）网址仍处于状态A

通缉行为：

我想打开一个包含错误消息的模式对话框
网址应该是状态B的网址（因此用户可以向我们发送链接或点击刷新再试一次）
理想情况下，状态A的视图仍然在模态
回到浏览器历史记录应该让我们回到状态A（模态可以收听popstate事件并自行关闭）
关闭模态也应该让我们回到状态A（所以再次更改网址）

一般情况下，要更改网址而不重新加载视图，我会执行以下操作：

{{1}}

但是在这种情况下阻止$ locationChangeSuccess事件没有帮助，因为错误出现在$ locationStateStart和$ stateChangeStart之后以及$ locationChangeSuccess和$ stateChangeSuccess之前。

因此，使用此解决方案，我得到一个无限循环。防止启动事件也无济于事，因为在这种情况下不会设置网址。

有没有人有一个想法如何实现这一目标？在此先感谢：）

Answer 1

我发现了一种适合我们情况的方法：

$rootScope.$on('$stateChangeError', function ($event, toState, toParams, fromState, fromParams, response) {
    ErrorModalService.openErrorModal({error: error});
    var failedStateUrl = $state.href(toState, toParams);
    var fromStateUrl = $state.href(fromState, fromParams);

    if (fromStateUrl !== null && fromStateUrl !== failedStateUrl) {
          var unbindLocationChange = $rootScope.$on('$locationChangeStart', function ($event) {
               $event.preventDefault();
               unbindLocationChange();
          });
          // After $stateChangeError, the url gets set back to the url of the previous state.
          // We want to keep the failedUrl (without reloading that state though)
          $timeout(function () {
             history.pushState(null, '', failedStateUrl);
          });
   }
});

UI路由器：在$ stateChangeError之后保留url（同时解析依赖关系）

1 个答案: