2

我正在尝试制作类似 facebook 的模态窗口 - 例如，您单击图像并在模态窗口中打开，并且 url 从/变为/img/dj27s_D而不重新呈现视图，当您关闭模态时，url 又回到/.

我发现使用

var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");

只会在下一次崩溃应用程序$digest。我也试过

$location.path = '';

但什么也没发生。如果我执行

$location.path('/img/id')

$routeProvider 将启动并更改视图。我不希望这种情况发生，只是想在打开模式时临时更改 url。

4

2 回答 2

1

您可以将路由器设置为使用以前的路由。例如，在您的控制器中以这种方式：

lastRoute = $route.current;
$scope.$on('$locationChangeSuccess', function (e) {
  if (window.location.href.match(/\/view/) || window.location.href === '/') {
    $route.current = lastRoute;
  }
});

当$route.current不改变时，不触发整页刷新。您可能希望进行一些正则表达式检查以保持您的 URL 空间整洁以防止刷新，但这是一个很小的代价。

于 2014-03-02T23:24:58.487 回答
0

我建议查看Angular UI-Router。您可能可以使用嵌套状态/嵌套视图来执行您所描述的操作，其中内部视图会弹出模式。您可以根据需要为每个州配置 URL。

编辑：可能有一种不使用 UI-Router 的方法，但我没有这样做。也许这个其他 SO 问题与您有关。

一个带有嵌套视图的 UI 路由器的简单部分示例，您可以将其放在控制器中：

$stateProvider.state('site', {
    url: "",
    templateUrl: 'app/parent.tpl.html',
    controller: 'ParentCtrl'
});

$stateProvider.state('site.child', {
    url: "/child",
    templateUrl: 'app/child.tpl.html',
    controller: 'ChildCtrl'
});

然后在父模板中，放入这种类型的div：

<div ui-view></div>

这将是子模板在父模板中加载的位置。在子模板中，您可以尝试模态对话框。

于 2014-03-02T22:30:10.840 回答