$digest already in progress only when using back/forward (but not ui-sref)

Roman

unread,

Apr 13, 2014, 1:47:19 PM4/13/14

to ang...@googlegroups.com

I'm using $stateChangeStart with ui-router as a means of setting which direction a ui-view transition should go. I have a state history array and if the toState is the last state visited then I slide the view right instead of left so it looks like you are going "back" to the view, nothing too crazy.

The original problem I had was that the ng-class wouldn't set properly on the current view, only the incoming view, so the current view wouldn't slide right off the screen. I slowed down the transition and in the chrome console saw that in fact the class was not being set to slide-right.

It started to work perfectly when I added $scope.$apply(). When I make a transition using ui-sref I don't see any errors in the console. But when I used back/forward I get the $digest already in progress error.

What's the difference between how the back/fwd buttons and ui-sref trigger a state change that would cause the error? Appreciate any insight!

The controller:

.controller('PublicController', function ($rootScope, $scope, $location, $anchorScroll) {

$scope.$on('$stateChangeStart', function(e, toState, toParams, fromState, fromParams, error) {

var hist = $scope.$parent.model.stateHistory;

if (hist.length && hist[0].name === toState.name) {

$scope.$parent.model.slideDirection = 'right';

$scope.$apply();

hist.shift();

}

else {

$scope.$parent.model.slideDirection = 'left';

$scope.$apply();

hist.unshift(fromState);

}

$location.hash('');

$anchorScroll();

});

})

The view:

<div class="main-public-view" ui-view="main.public"

ng-class="{

'slide-left' : model.slideDirection === 'left',

'slide-right' : model.slideDirection === 'right'

}"></div>

Roman

unread,

Apr 13, 2014, 1:49:23 PM4/13/14

to ang...@googlegroups.com

I should mention that it works fine in both cases, I just see an error when using back/fwd.

Roman

unread,

Apr 13, 2014, 1:51:48 PM4/13/14

to ang...@googlegroups.com

Full error:

at http://192.168.1.158:9000/bower_components/angular-ui-router/release/angular-ui-router.js:1091:20

Sander Elias

unread,

Apr 14, 2014, 2:47:05 AM4/14/14

to ang...@googlegroups.com

Hi Roman,

Why did you put in the $parent in all of those $scope.$parent.model.stateHistory things?. As model is already an object, I don't think you need it at all. (kind of a guess without seeing the rest of your code!)

did you try without the $parent in there? I suspect you can drop the apply then.

Regards

Sander

Lars Christian Jensen

unread,

Apr 14, 2014, 1:18:59 PM4/14/14

to ang...@googlegroups.com

Hi Roman,

$scope.$apply() is meant for executing an expression in angular from outside angular. Your $scope.$on()-callback is clearly already inside angular, so you should not add another $scope.$apply() inside it. I suggest you remove that and take a step back to the original problem.

--

thanks, Lars

inside the $scope.$on() callback seems incorrect and should

Gordon Bockus

unread,

Apr 14, 2014, 11:32:29 PM4/14/14

to ang...@googlegroups.com

Hi Roman,

So I had this same problem. I wasn't driving the class change through the state change events, but I believe you are impacted by the same issue. It turns out there is an issue with the ui-view and ng-animate that will not allow the animation you desire. Check out my post about it here:

https://groups.google.com/forum/#!topic/angular/iKpRhrPr8ko

And the github issue opened against it:

https://github.com/angular/angular.js/issues/6974

If I ever free up some time I'll take a swipe at fixing it, but until then I'm just living with the single direction animation.

Gordon

Reply all

Reply to author

Forward