2

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.

Deepsy
  • 3,769
  • 7
  • 39
  • 71

2 Answers2

1

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.

adrenalin
  • 1,656
  • 1
  • 15
  • 25
0

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.

Community
  • 1
  • 1
Matt Metlis
  • 681
  • 5
  • 9
  • Is there any solution without the UI-router? If not please can you provide a simple example. – Deepsy Mar 02 '14 at 22:31
  • here are some examples that might help you: http://stackoverflow.com/a/22116618/675065 – Alp Mar 02 '14 at 23:29
  • The thing is that my goal is to change the url, so when you press refresh or copy/paste the link in the address bar, you'll be redirected to the actual page, not the popup. I can't figure out how I can do this with UI-Router. – Deepsy Mar 03 '14 at 05:14
  • When the user has the popup open then hits refresh, do you want the user to route to the page with the popup, or without the popup? – Matt Metlis Mar 03 '14 at 21:03
  • Sorry for the late response. I want the user to go to the page without the popup. – Deepsy Mar 09 '14 at 15:19