angularjs - $rootScope seemingly updating too slowly in an asynchronous call -
i'm attempting achieve sliding left/sliding right effect (like navigating flow in app) ui-router , nganimate.
to achieve effect, adding css class on container of ui-view
elements follows:
<div class="ui-view-container" ng-class="navigationdirection"> @renderbody() </div>
then on run, listeing $statechangestart
broadcasted ui-router:
$rootscope.$on('$statechangestart', (event, to, toparams, from, fromparams) => { // determine if navigation in flow , set correct navigation direction // on rootscope applied ui-view-container 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 code doesn't apply first state entering (ng-enter
). after first state however, toggling of forward , navigation works perfectly. ng-enter
, ng-enter-active
, ng-leave
, ng-leave-active
style correctly specified transitions in css.
the thing can make work (including first navigation) force $rootscope
$apply()
after conditional block on $statechangestart
. full code follows:
$rootscope.$on('$statechangestart', (event, to, toparams, from, fromparams) => { // determine if navigation in flow , set correct navigation direction // on rootscope applied ui-view-container 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 error stating: $apply in progress
(angular error reference)
the versions of relevant libraries are:
- angularjs v1.3.2
- ui-router v0.3.1
- angular animate v1.3.2
Comments
Post a Comment