UI router | suspend a transition | onBefore

Question

How do I cancel a transition in an onBefore? This snippet probably can illustrate my intention:

$transitions.onBefore({}, (trans) => {
    console.log("before a transition");
    console.log(trans);

    //I want to broadcast an event here
    //notifying inner components that it's about to switch state
    //The event will contain the trans
    //So I actually don't need to wait here, I just need to suspend the trans at this point.

    //The inner component will respond by emitting and event. 
    //That event will contain approval status, and the trans object. 
    //My code can simply check the approval status; If false,
    //it simply does nothing. Otherwise it will pick and resume the trans.
});

Thanks

Answer 1

Figured it. This shows the idea.

First, have window.counter set to 0 in your boot.js / app.js..., and then in your controller's $onInit:

$transitions.onBefore({}, (trans) => {
  if (window.counter == 0) {
    this.$timeout(() => trans.run(), 2000);
    window.counter += 1;
    return false;
  }
});

You will notice at first your transition is cancelled..., and after 2 seconds it is re-run.