How to prevent hash/route change

[Adam Pohorecki]

Hi,

In my application I have several forms, and if a user enters some data
in a form and does not save it and then tries to navigate away from
the form (the current route changes), I would like to be able to show
a dialog saying like "You have unsaved data. Are you sure you want to
navigate away from this page?". Is it possible to somehow prevent a
route change with the current $route implementation?

Best regards,
Adam Pohorecki

[Vojta Jina]

Hey Adam, I'm pretty sure I have answered this question couple of weeks ago, but I can't find it...

Yes, it is possible, check out this gist: https://gist.github.com/1058740

There is one problem:

User change the url - $location is changed -> $route changes the route...

During $route changing, you cancel the change (set $route back to previous one).

But the url is already changed, so you have to revert the url back, which will cause another $route change :-D

So it is possible, but with current $location it is bit ugly...

With new $location, this should be much easier...

V.

[Adam Pohorecki]

Thanks a lot, that's exactly what I was looking for.

Thanks,
Adam

> --
> You received this message because you are subscribed to the Google Groups
> "angular" group.
> To view this discussion on the web visit
> https://groups.google.com/d/msg/angular/-/g5zWtPglmEAJ.
> To post to this group, send email to ang...@googlegroups.com.
> To unsubscribe from this group, send email to
> angular+u...@googlegroups.com.
> For more options, visit this group at
> http://groups.google.com/group/angular?hl=en.
>

[Kai Groner]

The $location service broadcasts a $locationChangeStart event.  You can observe that and call event.preventDefault() to stop the navigation.  Nice!

Kai

On Thursday, July 26, 2012 2:29:45 AM UTC-4, Guiboy wrote:

I was looking at this problem too,  tried the above (old solution) without luck, i thought about making all my links check a service but that is too much work, it would be great to have a way to know that the route is about to change (a before route change event)  and a cancel route change method.

In my research i stumbled upon $routeChangeSuccess, but as the name suggest it is too late, you could make one stuck on one view buy redirecting back, but you lose all context as the controller will execute again, my current use for it is to redirect user to login screen in case he is not logged in

hope someone else chime in this issue

On Wednesday, July 18, 2012 9:57:39 AM UTC-3, Chadd Whistler wrote:

So this doesn't appear to work with the current 1.0.1 version.  Are there any other alternatives?

 

Just some more background, I am working on a financial application so I need to have complete control over navigation which includes changes directly to the URL in the address bar, the browser forward/back buttons and links from within my application.

[guillaume...@gmail.com]

Is there a way to do this when the user clicks on the history back/forward button?

[elli...@gmail.com]

This smal hack works, if you can live with not having total control on the text in the popup.

    window.onbeforeunload = function () {

        return "Some of the text in the popup. The rest is controlled by the browser"                                

    };

At my current project we're loading it as an angular-job and using the injected $window

[Sandip Bhavsar]

Hello People,

I also want to do same thing as "I would like to show dialog box if user have edited page and try to navigate without saving data".

Fail to execute with above suggestions.

Need help !!!

[Vili]

Hey Vojta,

I am also stuck with the same issue, tried your solution but no luck.. :-(
I am listening to event $routeChangeStart but not able to find any way to stop this event or something else to cancel the route...
Please Help...

[Andy Joslin]

Use the `resolve` property to show a dialog if the user hasn't done things right.  http://www.youtube.com/watch?v=P6KITGRQujQ

[guillaume...@gmail.com]

This will only work if you're leaving the current website though, i.e. it will not work in html5 if you are going backward/forward (through the browser buttons) but still staying in the same domain, just popping/pushing states.

[guillaume...@gmail.com]

But this event is not fired by the browser backward/forward buttons

On Saturday, August 4, 2012 6:21:41 AM UTC+2, Kai Groner wrote:

[Kirk Bushell]

I ended up needing something similar, and did this - but what's interesting is that calling $location.path() (I needed to change the route if the route matched something else)), never actually changes - and the app can't go anywhere. Clicking on other routes/actions though, worked fine. In short, I was able to stop the user going anywhere, but I want to push them onto something else, which I think isn't possible atm, and I'm not sure why =\