Question

我正在尝试制作类似Facebook的模态窗口 - 例如，您点击图片并在模态窗口中打开，并且网址从/更改为/img/dj27s_D而不重新渲染视图，当您关闭模式，网址返回/。

我发现使用

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

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

$location.path = '';

但没有任何反应。如果我执行

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

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

Answer 1

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

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

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

Answer 2

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

编辑：可能有一种方法没有使用UI-Router，但我还没有这样做。也许this other SO question与您相关。

带有嵌套视图的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>

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

角度更改网址而不执行routeprovider

2 个答案: