0

I'm attempting to achieve a sliding left/sliding right effect (like navigating a flow in an app) with ui-router and ngAnimate.

To achieve this effect, I am adding a css class on the container of the ui-view elements as follows:

<div class="ui-view-container" ng-class="navigationDirection">
    @RenderBody()
</div>

Then on run, I am listeing for $stateChangeStart which is broadcasted from ui-router:

$rootScope.$on('$stateChangeStart', (event, to, toParams, from, fromParams) => {
    // Determine if the navigation is back in the flow and set the correct navigation direction
    // on the rootScope which is applied to the ui-view-container for the transition
    if (typeof from.params !== 'undefined' && typeof from.params.backState !== 'undefined' && to.name === from.params.backState.name) {
        $rootScope.navigationDirection = "back";
    } else {
        $rootScope.navigationDirection = "forward";
    }
});

The problem is my code doesn't apply to the first state that is entering (ng-enter). After the first state however, the toggling of forward and back navigation works perfectly. ng-enter, ng-enter-active, ng-leave and ng-leave-active all style correctly with my specified transitions in my css.

The only thing I can do to make it work perfectly (including first navigation) is to force the $rootScope to $apply() after my conditional block on $stateChangeStart. Full code as follows:

$rootScope.$on('$stateChangeStart', (event, to, toParams, from, fromParams) => {
    // Determine if the navigation is back in the flow and set the correct navigation direction
    // on the rootScope which is applied to the ui-view-container for the transition
    if (typeof from.params !== 'undefined' && typeof from.params.backState !== 'undefined' && to.name === from.params.backState.name) {
        $rootScope.navigationDirection = "back";
    } else {
        $rootScope.navigationDirection = "forward";
    }
    $rootScope.$apply();
});

The application works perfectly but I get an error stating: $apply already in progress (Angular error reference)

The versions of the relevant libraries are:

  • AngularJS v1.3.2
  • UI-Router v0.3.1
  • Angular Animate v1.3.2
Kevbot
  • 474
  • 8
  • 21
  • *$apply already in progress* means that current function already executes on digest and `$apply()` shouldn't be there. The fact that it works for you means that the error screws up normal flow of things and incidentally makes them work for you. At least you can try to place the same conditional block inside `$timeout(function () { ... })` and see if it works for you as well. – Estus Flask Sep 22 '16 at 18:30
  • @estus Yeah, I tried using `$timeout` but same results. – Kevbot Sep 22 '16 at 18:35

0 Answers0