$state transition after rejected promise Angular ui-router

Question

I'm using Angular ui-router and have a resolve function set up for one of my states, before the controller is initialized. I retrieve some data, loop through and match it up the URL stateParam, and if a match is found, resolve the promise to the controller and return that object in the promise. That's all working well.

However, if a match isn't found I simply want to redirect to a different state by rejecting the promise and running $state.go('state');

Simply this:

deferred.reject();
$state.go('state',{params: 'param'});

But this doesn't seem to do anything. The controller just hangs, and I get no console errors or anything. Any ideas?

This question apply to verion 0.xx, many things have changed in version 1.xx

Answer 1

ui-router is supposed to throw a $stateChangeError if a route resolve is rejected. You need to watch for this event, and trigger your state transition there.

As per the wiki:

$stateChangeError - fired when an error occurs during transition. It's important to note that if you have any errors in your resolve functions (javascript errors, non-existent services, etc) they will not throw traditionally. You must listen for this $stateChangeError event to catch ALL errors.

https://github.com/angular-ui/ui-router/wiki#wiki-state-change-events

---

As @gustavohenke mentioned in the comments, a good place to put this handler is your app's primary .run() function.

Answer 2

You're misunderstanding how promises work. deferred.reject() simply notifies the deferred.promise that it has been rejected.

var promise = deferred.promise;

promise.then(
  function (result) { 
    // this function runs if the promise was resolved
  },
  function (result) {
    // this function runs if the promise was rejected
    // this is where you should put $state.go(..)
  }
)