Handling route changes in AngularJS - javascript

I'm struggling to handle the back button and ask confirmation to the user, if app state is dirty. Closing tab and reload is already handled via the onbeforeunload hook.
I've played with $routeChangeStart, $beforeRouteChange, etc. but can't handle it correctly.
With $routeChangeStart, the route is effectively changed before my callback is called.
What is the correct way to handle this situation?
Thanks for your help.

I believe $locationChangeStart fires when you would like it to.

you could use:
$scope.$on('$routeChangeStart', function(next, current) {
//broadcasted before a route change
// do something here
});
See more of it on : $route

Keep a model of the dirty state in a parent controller, common to all views? An alert/confirm appears if a dirty state is detected by any view's controller, with a "Cancel" button that resets $location.path(...) to the dirty page.

Related

How to prevent state transition, when there is another transition running in angular ui router?

In my angular app, I have this issue. When user quickly double-clicks link to state (ui-sref link), the target state begins loading twice. This would be bearable, if the state window didn't freeze and stop responding to other state changes. When clicking another ui-sref links, URL changes accordingly, http calls on background are made, but the view is frozen.
I need to know, how can I prevent any transition, when there is another transition already trying to resolve promise. I know I can somehow work magic with $stateChangeStart and event.preventDefault(). What I don't know is how to allow my transition to continue after resolving it's resolve block and how to counterpart event.preventDefault().
Thanks for your time. Any advice will be greatly appreciated.
Angular UI Router's $state object has a property on it, 'transition', which will be present if it is in the middle of an active transition. One option is to remove the ui-sref attribute and use a ng-click attribute instead. Inside your ng-click function, you can do a manual check for the presence of the transition object before invoking $state.go().
Before
HTML:
<a ui-sref="Root.State1">
After
HTML:
<a href="" ng-click="goToStateOne()">
JS:
scope.goToStateOne = function() {
if (!$state.transition) $state.go('Root.State1');
}

alert user when leaving route in Ember 2.0

Ok so i have a component i made up with a form. I would like to alert the user that he has unsaved data (if he has) when the user clicks on another link.
Now if i would not be tied to ember i would put a flag on a change event and add a window unload listener to show the actual message, However,
Since im not really leaving the window this is not getting called.
Is there any Ember event i can attach a handler to? like a change route intent event of some kind
Im interesting in knowing which is the correct event for the leaving route action, not in the something change logic.
ive tried this so far on the didInsertElement( ) method
Ember.$("body").on('unload',()=> alert('it works'));
Ember.$("window").on('unload',()=> alert('it works'));
Ember.$("body").on('unload','body'()=> alert('it works'));
any ideas?
Have you had a look at the willTransition method on your route? That will be the place to do it. Have a read of this guide to preventing and retrying transitions, as well as the willTransition method's documentation. Hope that helps!
You can catch transition event on route. It's meant to be used for this use case.
There is also action when component is being destroyed but that is meant for teardown.

A context dependent navbar

I'm trying to build an Android action bar-like navbar in Ember. I would like the action bar to show the route (friendly) name and have context dependant button's on the right side. I came a long way, this jsFiddle will explain things more clearly:
jsFiddle
However, the activate event isn't I am using to figure out when a route has been changed, is only firing when one first visits the route (traversing back up the route tree won't trigger it), thus my context isn't loaded consistently.
What would be the best way to solve this problem? I know the serialize, renderTemplate and setupController fire on every route change, but none of these methods are intended to be used this way. Is there perhaps a way to add a custom event to my routes, that fires on every route change?
On a side note, I am completely new to ember so I may be going about this completely the wrong way, in that case, I am eager to hear a generally better solution, than mine.
UPDATE:
Thanks to kingpin2k's tip I was able to clean up my code a bit, for future reference here's the updated fiddle:
jsFiddle
didTransition/willTransition were created for this reason. In your case didTransition will make the most sense.
actions: {
didTransition: function(){
console.log('level two transition');
},
}
http://jsfiddle.net/FZ29Q/

AngularJS: How to prevent route change from happening

I'm listening to the event $routeChangeStart and I want to be able to redirect the user to another controller based on a condition. I am able to visually redirect him to another controller with $location.path() but the original controller still gets called. How can I prevent it? event.preventDefault() doesn't work.

Backbone.js Router and back button check

Basically, I am trying to check if the previous page on every route was equal to one specific page on my site. If it is, then I want to keep the person on that view, otherwise, they can proceed to the other view.
Is there a way in a Backbone.js router, to fire off a global event that will fire before the route callback is executed?
Or, is there a way to have a catch all route that does some checking then forwards to the appropriate route.
I think overridding Backbone.History.navigate and only invoking the superclass method conditionally might work. You could also add an additional event handler for window.hashChange and window.pushState events wired up before the backbone history, and prevent the default propagation of those events if your criteria match.

Categories