angular-ui-router 1.0.x: event.preventDefault & event.defaultPrevented alternative

Question

I just replaced the $stateChangeStart with $transitions.onStart

$rootScope.$on('$stateChangeStart', function(e, ...){
     e.preventDefault();
     // other code goes here...
});

to

$transitions.onStart({}, function(tras){
     // need a code equivalent to e.preventDefault
     // need a code to identify event.defaultPrevented 
     // other code goes here...

     // get parent states
     _o.util.getAncestorStates(toState.name, true).reverse()
        .forEach(function (state) {
           // certain condition to call event.preventDefault()

           if(event.defaultPrevented) {....}
     });
});

and I guess, we can prevent the transition by adding return $q.reject() instead of e.preventDefault() but I could not understand how the code below return $q.reject() would execute.

Also, how can I replace event.defaultPrevented?

I think should be done something on the transition.promise but not clear.

I am sorry, I can't understand the official doc - https://ui-router.github.io/ng1/docs/latest/ easily. Can anybody help me finding out a better explanation or the replacement for the above code?

Townsville

I think you can just return false from .onStart to cancel the transition.. – Rubrician

ok, I just added more snippet to understand why do I need event.defaultPrevented - I process all parent states & on a certain condition I call event.preventDefault & I check event.defaultPrevented for any other parent state. – Townsville

With promise chains, code in subsequent .then blocks are skipped if a previous block cancels. An onStart handler will never be called if a previous handler cancels a transition. event.defaultPrevented will never be true in an onStart handler. Instead the onError handler chain gets called and those blocks will only be called if and only if event.defaultPrevented is true. – Rheims

Answer 1

You can choose one of these two options depend on your logic:

• Since angular-ui-router 1.0.3 you can use $transition.abort(). Cleaner choice if you have to abort state change after an async call.

  $transitions.onStart({}, function($transition) {
      $transition.abort();
      //more code...
  });
  

• Also, as @tanmay says in comments, you can use a simple return false to cancel it. This will work in non stable versions too (1.0.0.beta and 1.0.0.rc). (Check it in ui-rooter docs)

  $transitions.onStart({}, function($transition) {
      //code ...
      return false;
  });
  

Unifoliolate