5

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

脚步 ：

  1. 用户加载页面
    • 网址：xyz.com/home
  2. 用户单击链接打开模式
    • 网址：xyz.com/detail/123
    • 可能的解决方案：使用 html5 推送状态更改 url
    • 问题：Angular ui-router 尝试根据更改的 url 运行其路由，最终更改背景页面。
  3. 用户关闭模式
    • 网址：xyz.com/home
    • 可能的解决方案：html5 pop 状态
    • 问题：重新加载后台页面，杀死目的

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

4

4 回答 4

1

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

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

于 2016-06-09T11:13:28.673 回答
0

设法使用https://github.com/christopherthielen/ui-router-extras/tree/gh-pages/example/stickymodal来实现这一点

于 2016-06-21T11:36:57.777 回答
0

这可以通过嵌套状态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 的常见问题解答中有所描述。

这里是笨拙的。在这个例子中，模态的作用域被创建为-当没有作用域传递给它时$rootScope的默认行为的子元素。$uibModal在这种情况下，我们应该使用 modal 的控制器中的服务通过 url 参数获取数据。

要使主 URL 和详细 URL 看起来像这样 -xyz.com/home并且- 我们应该在子状态中xyz.com/detail/123使用绝对 URL ( )。^/details/:id

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

于 2016-06-11T16:30:19.557 回答
0

我认为您可以使用 ngSilent 模块来实现这一点

https://github.com/garakh/ngSilent

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

于 2016-06-12T11:19:09.317 回答