Question

我想在打开ui bootstrap模式时暂时更改浏览器URL（后面的页面应该保持原样，只有url更改）。当模态关闭时，网址应该恢复为原始模式。

步骤：

用户加载页面
- url：xyz.com/home
用户点击链接会打开一个模态
- url：xyz.com/detail/123
- 可能的解决方案：使用html5推送状态更改网址
- 问题：Angular ui-router尝试按照更改的URL运行其路由，最终更改后台页面。
用户关闭模态
- url：xyz.com/home
- 可能的解决方案：html5 pop state
- 问题：重新加载背景页面，这会杀死目的

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

Answer 1

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

<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将为空。

Answer 2

这可以通过nested state并使用onEnter回调触发模式来实现：

$stateProvider
  .state('contacts', {
    url: '/home',
    templateUrl: 'home.html',
    controller: function($scope, MyService){
      $scope.contacts = MyService.getContacts();
    }
  })
  .state('contacts.details', {
    url: "^/details/:id", // using the absolute url to not have the "/home" prepended
    onEnter: function($state, $uibModal) {
      var modal = $uibModal.open({
        templateUrl: 'details.html',
        controller: function($scope, $stateParams, MyService) {
            // get data from service by url parameter
            $scope.contact = MyService.getContact($stateParams.id);
        }
      });

      modal.result.finally(function() {
        $state.go('^'); // activate the parent state when modal is closed or dismissed
      });
    }
  });

此技巧在ui-router的常见问题解答中为described。

这里是plunk。在此示例中，模式的范围是作为$rootScope的子项创建的 - 当没有传递范围时，默认$uibModal的行为。在这种情况下，我们应该使用模态控制器中的服务来通过url参数获取数据。

要让主网址和详细信息网址如下所示 - xyz.com/home和xyz.com/detail/123 - 我们应该在子状态中使用绝对网址（^/details/:id）。

使用此解决方案，您可以直接打开详细信息URL，并且仍然可以正确激活主要和详细状态，因此可以共享详细信息URL。

Answer 3

我认为您可以使用ngSilent模块

来实现这一目标

https://github.com/garakh/ngSilent

使用$ngSilentLocation.silent('/new/path/'); （一旦打开模态，关闭后再次打开）

Answer 4

使用https://github.com/christopherthielen/ui-router-extras/tree/gh-pages/example/stickymodal

管理实现此目的

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

4 个答案: