CODEWITHSUNDEEP
angularjsangular-uiangular-ui-router
rich97
rich97

Reputation: 2879

Changing how the ui-view directive handles page transitions

Edit: DON'T DO THIS. It's a waste of time unless you want to spend hours debugging, turns out this is a lot more complicated than I first thought. For now the solution to this is:

In short, if you need this (I have seen a few questions on the ui-router issue tracker) don't use resolvers or ng-animate for the enter animations. You also can't do it on the $stateChangeStart event and the leaving animations as this collides with how ui-router works.

Below is my original question.

I have a specific use case where I need the page transitions and resolves to happen in a certain order currently they happen like this:

resolve > animate out > animate in

I need it more like this:

animate out > resolve > animate in

I decided to check out the ui-router source code and find out why it behaves they way it does. Fortunately it's a very simple mod. In the ui-view directive we have this code.

scope.$on('$stateChangeSuccess', function() {
    updateView(false); // cleanupLastView(); is at the end of this function
});
scope.$on('$viewContentLoading', function() {
    updateView(false); // cleanupLastView(); is at the end of this function
});

I need to updated it to:

scope.$on('$stateChangeStart', function() {
    cleanupLastView();
});
scope.$on('$stateChangeSuccess', function() {
    updateView(false); // remove cleanupLastView();
});
scope.$on('$viewContentLoading', function() {
    updateView(false); // remove cleanupLastView();
});

The problem is that for obvious reasons, I don't want to go and hack the core. Is there any way to "de-register" the ui-router's ui-view directive and tell it to use one of mine instead?

Upvotes: 4

Views: 1074

Answers (1)

rich97
rich97

Reputation: 2879

So I actually wrote this question up and then found an answer. Posting it for anyone else on their travels around the internet.

The answer was to copy BOTH ui-view directives and simply add a new directive called (for example) rich97-view. Then you can use it in your view as if you were using ui-view. The great thing about this methods is that the mod only applies where you need it to, the default behavior is unchanged.

Upvotes: 2

Related Questions