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?

I think you can just `return false` from `.onStart` to cancel the transition.. — tanmay, May 10 '17 at 09:40
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. — Garfield, May 10 '17 at 09:45
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. — georgeawg, May 10 '17 at 19:36

The.Bear · Accepted Answer · 2017-05-11T04:23:20.183

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;
});
```

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

1 Answers1

Linked