Question

I'm trying to make facebook-like modal windows - for example you click on image and it opens in modal window and the url changes from / to /img/dj27s_D without rerendering the views and when you close the modal the url goes back to /.

I figured out that using

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

will just crash the application on the next $digest. I have also tried

$location.path = '';

but nothing happens. If I execute

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

The $routeProvider will kick in and change the views. I dont want this to happen, just want to temporary change the url while the modal is opened.

No correct solution

OTHER TIPS

You can set the router to use the previous route. For example this way in your controller:

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

When $route.current does not change, full page refresh is not triggered. You might wish to do some regexp checks to keep your URL space tidy to prevent refresh, but it's a small price to pay.

I recommend looking at the Angular UI-Router. You might be able to do what you're describing with a nested state / nested view, where the inner view pops up the modal. You can configure the URLs for each state as you want.

Edit: There may be a way without using UI-Router, but I haven't done that. Perhaps this other SO question is relevant to you.

A simple partial example of UI Router with a nested view, you'd put this in your controller:

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

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

Then in the parent template, put this type of div:

<div ui-view></div>

which will be where the child template will load within the parent template. In the child template, you could try the modal dialog.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top