Clever Geek Handbook

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

I just replaced $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 think we can prevent the transition by adding return $q.reject()

instead e.preventDefault()

, but I couldn't figure out how the code below would execute return $q.reject()

.

Also how can I replace event.defaultPrevented

?

I think I need to do something on transition.promise

, but not clear.

Sorry, I can't understand the official doc - https://ui-router.github.io/ng1/docs/latest/ easily. Can anyone help me find a better explanation or replace the above code?

+3


source to share


1 answer


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



  • Since angular-ui-router 1.0.3 you can use $transition.abort()

    , A cleaner choice if you need to abort the state change after an asynchronous call.

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

  • Also, as @tanmay says in the comments, you can use a simple return false

    one to reverse it. This will work in unstable versions too ( 1.0.0.beta and 1.0.0.rc ). ( Check it out in the ui-rooter docs )

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


source






More articles:


All Articles