Angularjs UI引导程序在打开时临时更改URL,并在关闭时恢复为原始

发布时间：2020-12-17 18:09:23 所属栏目：安全来源：网络整理

导读：我想在打开ui bootstrap模式时暂时更改浏览器URL(后面的页面应保持原样,只有url更改).当模态关闭时,URL应该恢复为原始模式. 脚步：用户加载页面 url：xyz.com/home 用户点击链接打开模态 url：xyz.com/detail/123 可能的解决方案：使用html5推送状态更改UR

我想在打开ui bootstrap模式时暂时更改浏览器URL(后面的页面应保持原样,只有url更改).当模态关闭时,URL应该恢复为原始模式.

脚步：

>用户加载页面

> url：xyz.com/home

>用户点击链接打开模态

> url：xyz.com/detail/123
>可能的解决方案：使用html5推送状态更改URL
>问题：Angular ui-router尝试按照更改的URL运行其路由,最终更改后台页面.

>用户关闭模态

> url：xyz.com/home
>可能的解决方案：html5 pop状态
>问题：重新加载背景页面,这会杀死目的

示例实现：Pinterest引脚及其引脚详细信息弹出.

解决方法

您可以使用 ui-router-extras sticky state来解决您的问题.通过链接有模态的简单示例.您应该创建两个命名视图,一个用于主要内容(背景),另一个用于模态.

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

标记状态,从您要访问的模态为粘性：在路径定义中为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);

该解决方案存在小问题.如果您在模态状态下重新加载页面,则app ui-view将为空.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!