CODEWITHSUNDEEP
angularjsangular-ui-router
developthewebz
developthewebz

Reputation: 1947

Cancel a $transitions change ui-router

I am trying to cancel a $transitions change under certain conditions using ui-router.

In my run block, I have the following code:

   $transitions.onStart( { from: 'createCatalog.previewStyles'}, function(trans) {
      var from = trans.from(),
            to = trans.to();
      previewStylesService.checkSave()
        .then(function success() {
           return $state.target(to);
        }, function err() {
          return $state.target(from);
        });
    });

My previewStylesService checkSave function looks like this:

    function checkSave() {
        var deferred = $q.defer()
        if (dataChanged) {
            if (confirm('Would you like to save the changes made to the catalog?')) {
                catalogService.prepCatalogSave()
                    .then(function success() {
                        deferred.resolve();
                    }, function err () {
                        deferred.reject();
                    })
            } else {
                deferred.resolve();
            }
        } else {
            deferred.reject();
        }
        return deferred.promise;
    }

Then based on the above conditions, the $transition will either take place or will cancel. The problem is, even if the above code's promise is rejected, the state still changes to the originally requested state. How can I "cancel" the state change in this case?

Upvotes: 3

Views: 6823

Answers (2)

Adam Reis
Adam Reis

Reputation: 4483

Simply return false from your hook to cancel the transition:

https://ui-router.github.io/ng1/docs/latest/modules/transition.html#hookresult

Upvotes: 2

FitzChill
FitzChill

Reputation: 866

I do know it is may be late to help you but It could help others. I just ran into the same problem and after about a couple of hours of research/doc reading I came to the conclusion that $transitions.onBlaBla callbacks had a return value that could be true (the transition resume normaly), false (transition is canceled), or a promise (transitionService will wait for this promise rejection/resolve to decide if it needs to do the transition or not

You could try to return 

return previewStylesService.checkSave()

to see what happens or try to do it differently with a return true/false and some other code hooks

Here is the link of hook result that is return by your onSuccess Callback: https://ui-router.github.io/ng1/docs/latest/modules/transition.html#hookresult

Upvotes: 2

Related Questions