Angularjs UI Bootstrap 在打开时临时更改 URL 并在关闭时恢复为原始 URL

Question

我想在打开 ui 引导模式时临时更改浏览器 url(后面的页面应保持原样，只有 url 更改)。当模态关闭时，url 应该恢复到原来的。

脚步 :

用户加载页面

网址:xyz.com/home

用户点击一个链接打开一个模态

网址:xyz.com/detail/123

可能的解决方案:使用 html5 推送状态更改 url

问题:Angular ui-router 尝试根据更改后的 url 运行其路由，最终更改后台页面。

用户关闭模态

网址:xyz.com/home

可能的解决方案:html5 弹出状态

问题:重新加载后台页面，杀死目的

示例实现:Pinterest 引脚及其引脚详细信息弹出窗口。

Answer 1

您可以使用 ui-router-extras sticky state解决您的问题。链接中有一个简单的模态示例。您应该创建两个命名 View ，一个用于主要内容(背景)，一个用于模态。

<div ui-view="app"></div>
<div ui-view="modal"></div>

标记状态，从您要访问的模式为 sticky: true在路由定义中。

.state('main', {
  abstract: true,
  url: '/',
  templateUrl: '_layout.html'
})
.state('main.index', {
  url: '',
  sticky: true,
  views: {
    'app': {
      templateUrl: 'index.html'
    }
  }
})
.state('main.login', {
  url: 'login/',
  views: {
    'modal': {
      templateUrl: 'login.html'
    }
  }
})

还要为 stateChangeSuccess 添加一个事件:

$rootScope.$on('$stateChangeSuccess', function (ev, to, toParams, from, fromParams) {
  if ((from.views && !from.views.modal) || !from.views) {
    $rootScope.from = from;
    $rootScope.fromParams = fromParams;
  }
});

所以，当你需要关闭模态时，你可以
$state.go($rootScope.from, $rootScope.fromParams);
该解决方案存在小问题。如果您在模态状态下重新加载页面，则应用程序 ui-view将是空的。