Question

我正在使用带有Angular 1.4.3的UI路由器0.2.15。我的一些页面可以打开Twitter Bootstrap模式。默认情况下，无法直接链接到开放模式，因此我编写了一个自定义指令，该指令将侦听URL中的查询参数以打开和关闭模态。如果查询参数存在，则打开模态，如果不存在，则关闭它。当用户想要链接到同一页面上的不同模态，或者只是想深度链接到模态时，这会派上用场。因此，用于触发一些JavaScript打开模态的按钮现在只链接到稍微不同的路径，而不是通过指令打开模态。

这由我的指令中的以下代码处理：

scope.$watch(function () {
  return $state.params[param];
}, function (param) {
  $timeout(function () {
    if (param) {
      element.modal('show');
    } else {
      element.modal('hide');
    }
  }, 0, false);
}, true);

// When the modal is closed, remove the param from the URL
element.on('hidden.bs.modal', function () {
  $state.params[param] = undefined;

  scope.$apply(function () {
    $state.go($state.current, $state.params);
  });
});

这很好用，但这是我的问题。想象一下以下流程：

您打开了一页
您打开第b页
您点击指向?_id=1
追加查询参数_id=1，打开模态
关闭模式，删除查询参数
你回到历史
重新打开模态，因为历史记录中的最后一个条目包含查询参数

即使用户希望在页面a上结束，也会重新打开模态。毕竟，那是用户访问的最后一页。

换句话说，如何使模式对浏览器的历史记录没有任何影响，即使它是可链接的？

我的第一个想法是replace每当查询参数更改时，历史记录中的最后一个条目。但是，一旦打开模态，那就太晚了，因为我需要访问倒数第二个历史条目并将其替换为当前条目，据我所知，这是不可能的。

理想情况下，查询参数更改会有{ location: 'replace' }之类的内容，可以定义为路由中的另一个选项。

我还检查了Can you use hash navigation without affecting history?和AngularJS redirect without pushing a history state，但没有用。

忽略浏览器历史记录中的可链接模态

0 个答案: